/* ==========================================================================
   Theme like the legacy app (TriKagranSportMembers/wwwroot/css/site.css): the club blue
   #183963 (CI), light grey-blue page, white surfaces with fine borders, pill buttons,
   Plus Jakarta Sans. Colours, font and radius come from the MudTheme in MainLayout.razor;
   here is only what the theme variables cannot express.
   ========================================================================== */

/* Plus Jakarta Sans - self-hosted variable font from Fontsource (OFL-1.1, wwwroot/lib/plus-jakarta-sans).
   One file per subset covers every weight. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(lib/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url(lib/plus-jakarta-sans/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url(lib/plus-jakarta-sans/plus-jakarta-sans-latin-ext-wght-italic.woff2) format('woff2-variations');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: italic;
    font-display: swap;
    font-weight: 200 800;
    src: url(lib/plus-jakarta-sans/plus-jakarta-sans-latin-wght-italic.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    --tk-blue: #183963;
    --tk-blue-50: #e8eef7;
    --tk-blue-100: #d3dff0;
    --tk-border: #e3e8ef;
    --tk-muted: #667085;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Page titles (mostly the h1 in a grid's toolbar): club blue, bold capitals - as the
   wiki headings in the legacy app. */
h1 {
    color: var(--tk-blue);
    font-size: 1.5em;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.title {
    font-weight: 700;
}

/* --- Menu on the left ------------------------------------------------- */
.app-drawer {
    border-right: 1px solid var(--tk-border);
}

    /* The gap to the edge comes from the menu, not from margins on the links: MudBlazor indents
       the links inside a group itself, and a shrunk link would drag its background off the left
       edge. */
    .app-drawer .mud-navmenu {
        padding: 4px 8px;
    }

        .app-drawer .mud-navmenu .mud-navmenu {
            padding: 0;
        }

    .app-drawer .mud-nav-link {
        border-radius: 999px;
    }

        .app-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
            background-color: var(--tk-blue-50);
        }

        /* As specific as MudBlazor's own active rules (.mud-navmenu.mud-navmenu-default ...),
           including their hover variant - otherwise its grey wins. */
        .app-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled),
        .app-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled):hover:not(.mud-nav-link-disabled) {
            background-color: var(--tk-blue-50);
            color: var(--tk-blue);
            font-weight: 600;
        }

            .app-drawer .mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
                color: var(--tk-blue);
            }

/* --- Buttons: pills, like the legacy app ----------------------------- */
.mud-button-root.mud-button-filled,
.mud-button-root.mud-button-outlined,
.mud-button-root.mud-button-text {
    border-radius: 999px;
}

.mud-button-group-root .mud-button-root {
    border-radius: 0;
}

    .mud-button-group-root .mud-button-root:first-child {
        border-top-left-radius: 999px;
        border-bottom-left-radius: 999px;
    }

    .mud-button-group-root .mud-button-root:last-child {
        border-top-right-radius: 999px;
        border-bottom-right-radius: 999px;
    }

/* --- Surfaces: fine border instead of a heavy shadow ------------------ */
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover):not(.mud-dialog):not(.mud-snackbar):not(.mud-alert):not(.mud-elevation-0) {
    border: 1px solid var(--tk-border);
}

.mud-card {
    transition: box-shadow 0.15s ease;
}

    .mud-card:hover {
        box-shadow: var(--mud-elevation-4);
    }

/* --- Lists with a toolbar: title, search and buttons stand on the page, only the table
   itself is a white card - like the pages of the legacy app. Tables without a toolbar
   (e.g. inside a MudPaper of their own) are left as they are. --- */
.mud-table:has(> .mud-table-toolbar) {
    background-color: transparent;
    box-shadow: none !important;
}

    .mud-table:has(> .mud-table-toolbar) > .mud-table-toolbar {
        margin-bottom: 0.75rem;
        padding-left: 0;
        padding-right: 0;
        padding-inline-start: 0;
        padding-inline-end: 0;
    }

    .mud-table:has(> .mud-table-toolbar) > .mud-table-container {
        border: 1px solid var(--tk-border);
        border-radius: var(--mud-default-borderradius);
        background-color: var(--mud-palette-surface);
        box-shadow: var(--mud-elevation-1);
    }

/* --- Tables and grids: light header in club blue capitals instead of a dark bar --- */
.mud-table-root .mud-table-head .mud-table-cell {
    background-color: var(--tk-blue-50);
    border-bottom: 1px solid var(--tk-border);
    color: var(--tk-blue);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

    .mud-table-root .mud-table-head .mud-table-cell .mud-icon-button,
    .mud-table-root .mud-table-head .mud-table-cell .mud-table-sort-label-icon {
        color: var(--tk-blue) !important;
    }

    /* The header sits inside the rounded table - its corners must follow */
    .mud-table-root .mud-table-head .mud-table-cell:first-child {
        border-top-left-radius: var(--mud-default-borderradius);
    }

    .mud-table-root .mud-table-head .mud-table-cell:last-child {
        border-top-right-radius: var(--mud-default-borderradius);
    }

/* --- Tabs: the tab bar stands on the page like the list toolbars, no box of its own --- */
/* Only the plain bar; coloured ones (mud-tabs-tabbar-primary etc.) keep their colour. */
.mud-tabs-tabbar:not([class*="mud-tabs-tabbar-"]) {
    background-color: transparent;
    border-bottom: 1px solid var(--tk-border);
}

/* Wiki document types: icon tiles, the icon and colour choice (Admin/WikiPage/DocumentTypes). */
.doc-type-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: .7rem;
    color: var(--doc-color);
    background: color-mix(in srgb, var(--doc-color) 12%, #fff);
    vertical-align: middle;
}
.doc-type-tile.small { width: 2rem; height: 2rem; border-radius: .55rem; }
.doc-type-preview { display: flex; align-items: center; gap: .85rem; padding: .65rem .85rem; border: 1px solid var(--mud-palette-lines-default); border-radius: .75rem; }
.doc-type-preview-name { font-weight: 600; }
.doc-type-preview-meta { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.doc-type-icons { display: flex; flex-wrap: wrap; gap: .4rem; }
.doc-type-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: .7rem;
    background: #fff;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.doc-type-choice:hover { color: var(--doc-color); border-color: var(--doc-color); }
.doc-type-choice.selected {
    color: var(--doc-color);
    border-color: var(--doc-color);
    background: color-mix(in srgb, var(--doc-color) 12%, #fff);
    box-shadow: 0 0 0 1px var(--doc-color);
}
.doc-type-colors { display: flex; flex-wrap: wrap; gap: .5rem; }
.doc-type-swatch {
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
    transition: transform .15s;
}
.doc-type-swatch:hover { transform: scale(1.1); }
.doc-type-swatch.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 4px currentColor; color: var(--mud-palette-text-primary); }