/* 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;
    --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%;
}

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;
    }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .mud-main-content {
        background-color: var(--tt-page-bg-dark);
    }
}

/* 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;
}

@media (prefers-color-scheme: dark) {
    .chat-input-sticky {
        background-color: var(--tt-page-bg-dark);
    }
}

/* 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;
}