/* Custom styles based on MAUI application design */
/* Color palette reference: https://color.romanuke.com/tsvetovaya-palitra-3852/ */

:root {
    --tt-primary: #CACAC8;
    --tt-primary-text: #000010;
    --tt-primary-dark: #b6846b;
    --tt-primary-dark-text: #f73149;
    --tt-secondary: #b6846b;
    --tt-secondary-text: #FFFFFF;
    --tt-secondary-dark: #7D7D7D;
    --tt-secondary-dark-text: #A7A6A6;
    --tt-tertiary: #f73149;
    --tt-tertiary-dark: #686869;
    --tt-tertiary-dark-text: #8B8A8C;
    --tt-accept: #52E02C;
    --tt-reject: #CD5C5C;
    --tt-increased-rating: #58A943;
    --tt-decreased-rating: #BA4A57;
    --tt-white: #FFFFFF;
    --tt-black: #000010;
    --tt-off-black: #1f1f1f;
    --tt-gray-50: #F5F5F5;
    --tt-gray-100: #E1E1E1;
    --tt-gray-200: #C8C8C8;
    --tt-gray-300: #ACACAC;
    --tt-gray-400: #919191;
    --tt-gray-500: #6E6E6E;
    --tt-gray-600: #404040;
    --tt-gray-900: #212121;
    --tt-gray-950: #141414;
    --tt-current-player-top-bg: #F7E1D5;
    --tt-card-bg-dark: #322F37;
    --tt-card-title-dark: #F4EFF4;
    --tt-card-alt-title-light: #CAC4D0;
    --tt-card-alt-title-dark: #79747E;
    --tt-bottom-sheet-bg-light: #E1E1E1;
    --tt-bottom-sheet-bg-dark: #25232A;
    --tt-bottom-sheet-separator-light: #625B71;
    --tt-bottom-sheet-separator-dark: #E7E0EC;
    --tt-page-bg: #F7F7F7;
    --tt-page-bg-dark: #080808;

    /* Game result colors — mirrors Colors.xaml GameResult_* / GameCard_* / GameText_* */
    --tt-game-result-win: #1F9D57;
    --tt-game-result-loss: #D23B2E;
    --tt-game-result-draw: #C98A1E;
    --tt-game-result-neutral: #9A9A9A;
    --tt-game-card-border: #E0E0E0;
    --tt-game-card-separator: #E4E2DD;
    --tt-game-card-pressed: #F7F6F4;
    --tt-game-text-name: #222222;
    --tt-game-text-name-strong: #2B2B2B;
    --tt-game-text-sub: #6B6B6B;
    --tt-game-text-separator: #CFCDC7;
    --tt-game-text-accent-amber: #B07C40;
    --tt-game-text-muted: #9A9A9A;
    --tt-game-text-secondary: #7A7A7A;
    --tt-game-text-delta-unit: #BCBCBC;
    --tt-game-qualifying-text: #9A6F2E;
    --tt-game-qualifying-bg: #F6EED9;
    --tt-game-qualifying-border: #E7D6AD;
    --tt-game-hand-pill-text: #7A6A52;
    --tt-game-hand-pill-bg: #F1ECE1;
    --tt-game-hand-pill-border: #E2D8C4;

    --tt-border-radius: 8px;
    --tt-appbar-height: 64px;
    --tt-bottomnav-height: 64px;
    /* Typography scale — mirrors MAUI Styles.xaml */
    --tt-font-family: 'Roboto', system-ui, sans-serif;
    --tt-font-size-body: 0.9375rem;      /* 15px */
    --tt-font-size-secondary: 0.8125rem; /* 13px */
}

/* Base styles */
html {
    overflow-x: hidden;
    height: 100%;
    color-scheme: light;
}

body {
    overflow-x: hidden;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--tt-font-family);
}

/* MudBlazor overrides */
.mud-main-content {
    background-color: var(--tt-page-bg);
}

.mud-paper,
.mud-card,
.mud-button-root,
.mud-input,
.mud-text-field {
    border-radius: var(--tt-border-radius);
}

.mud-button-root {
    font-weight: 500;
    text-transform: none;
    padding: 10px 14px;
    min-height: 44px;
}

/* Rating colors */
.tt-rating-increased {
    color: var(--tt-increased-rating);
    font-weight: 500;
}

.tt-rating-decreased {
    color: var(--tt-decreased-rating);
    font-weight: 500;
}

/* Action buttons */
.tt-accept-button {
    background-color: var(--tt-accept) !important;
    color: var(--tt-white) !important;
}

.tt-reject-button {
    background-color: var(--tt-reject) !important;
    color: var(--tt-white) !important;
}

/* Mobile adjustments */
@media (max-width: 959px) {
    .main-content-with-bottom-nav {
        padding-bottom: 80px !important;
    }

    /* Stick tab bar to the top on mobile, directly under the AppBar */
    .mud-tabs-tabbar {
        position: sticky;
        top: var(--tt-appbar-height);
        z-index: 100;
    }
}

/* Dark mode intentionally disabled — light-only app */

/* Bottom sheet action button: icon on top, label below (matches MAUI layout) */
.bs-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    padding: 10px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    gap: 6px;
}

.bs-action-btn span {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

/* Add spacing between tab header bar and tab panels content */
.mud-tabs-panels {
    margin-top: 16px;
}

/* List tile shared styles */
.tt-tile {
    cursor: pointer;
}

.tt-tile--selected {
    background-color: var(--tt-gray-100) !important;
}

.tt-tile--current-player {
    background-color: var(--tt-current-player-top-bg) !important;
}

.tt-tile-secondary-text {
    color: var(--tt-gray-400);
}

/* Chat input bar sticks to the bottom of the viewport while scrolling */
.chat-input-sticky {
    position: sticky;
    bottom: 0;
    background-color: var(--tt-page-bg);
    z-index: 10;
    padding-bottom: 8px;
}

/* Dark mode intentionally disabled */

/* On mobile, account for the bottom navigation bar */
@media (max-width: 959px) {
    .chat-input-sticky {
        bottom: var(--tt-bottomnav-height);
    }
}

.score-input .mud-input-root {
    text-align: center;
    font-size: 2rem !important;
    font-weight: bold;
}