/* Catppuccin Frappé Theme for Evennia Homepage */

/* Catppuccin Frappé Color Palette */
:root {
    --ctp-base: #303446;
    --ctp-mantle: #292c3c;
    --ctp-crust: #232634;
    --ctp-text: #c6d0f5;
    --ctp-subtext0: #a5adce;
    --ctp-subtext1: #b5bfe2;
    --ctp-surface0: #414559;
    --ctp-surface1: #51576d;
    --ctp-surface2: #626880;
    --ctp-overlay0: #6c7086;
    --ctp-overlay1: #737994;
    --ctp-overlay2: #838ba7;
    --ctp-blue: #8caaee;
    --ctp-lavender: #babbf1;
    --ctp-sapphire: #85c1dc;
    --ctp-sky: #99d1db;
    --ctp-teal: #81c8be;
    --ctp-green: #a6d189;
    --ctp-yellow: #e5c890;
    --ctp-peach: #ef9f76;
    --ctp-maroon: #ea999c;
    --ctp-red: #e78284;
    --ctp-mauve: #ca9ee6;
    --ctp-pink: #f4b8e4;
    --ctp-flamingo: #eebebe;
    --ctp-rosewater: #f2d5cf;
}

/* Body background */
body {
    background-color: var(--ctp-base) !important;
    color: var(--ctp-text) !important;
}

/* Navbar styling */
.navbar {
    background-color: var(--ctp-mantle) !important;
    border-bottom: 1px solid var(--ctp-surface0);
}

.navbar-brand {
    color: var(--ctp-lavender) !important;
}

.navbar-brand:hover {
    color: var(--ctp-blue) !important;
}

.navbar-nav .nav-link {
    color: var(--ctp-subtext0) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--ctp-blue) !important;
}

/* Footer styling */
.footer {
    background-color: var(--ctp-mantle) !important;
    border-top: 1px solid var(--ctp-surface0);
    color: var(--ctp-subtext0) !important;
}

/* Play button styling */
a.playbutton {
    background: linear-gradient(to bottom, var(--ctp-blue) 5%, var(--ctp-sapphire) 100%) !important;
    background-color: var(--ctp-blue) !important;
    box-shadow: 0px 1px 10px 5px var(--ctp-surface0) !important;
    border: 1px solid var(--ctp-surface1) !important;
    color: var(--ctp-crust) !important;
    text-shadow: none !important;
}

a.playbutton:hover {
    background: linear-gradient(to bottom, var(--ctp-sapphire) 5%, var(--ctp-blue) 100%) !important;
    background-color: var(--ctp-sapphire) !important;
}

/* Card styling */
.card {
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface0) !important;
}

.card-header {
    background-color: var(--ctp-surface0) !important;
    border-bottom: 1px solid var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.card-body {
    color: var(--ctp-subtext0) !important;
}

.card-footer {
    background-color: var(--ctp-surface0) !important;
    border-top: 1px solid var(--ctp-surface1) !important;
}

/* Table styling */
.table {
    color: var(--ctp-text) !important;
}

.table thead th {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.table tbody tr {
    border-color: var(--ctp-surface0) !important;
}

.table tbody tr:hover {
    background-color: var(--ctp-surface0) !important;
}

/* Form styling */
.form-control {
    background-color: var(--ctp-crust) !important;
    border: 1px solid var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

.form-control:focus {
    background-color: var(--ctp-base) !important;
    border-color: var(--ctp-blue) !important;
    color: var(--ctp-text) !important;
}

.form-control::placeholder {
    color: var(--ctp-overlay0) !important;
}

.form-label {
    color: var(--ctp-subtext0) !important;
}

/* Button styling */
.btn-primary {
    background-color: var(--ctp-blue) !important;
    border-color: var(--ctp-sapphire) !important;
    color: var(--ctp-crust) !important;
}

.btn-primary:hover {
    background-color: var(--ctp-sapphire) !important;
    border-color: var(--ctp-blue) !important;
    color: var(--ctp-crust) !important;
}

.btn-secondary {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.btn-secondary:hover {
    background-color: var(--ctp-surface1) !important;
    border-color: var(--ctp-surface2) !important;
    color: var(--ctp-text) !important;
}

/* Link styling */
a {
    color: var(--ctp-blue) !important;
}

a:hover {
    color: var(--ctp-lavender) !important;
}

/* Heading styling */
h1, h2, h3, h4, h5, h6 {
    color: var(--ctp-text) !important;
}

h1, h2 {
    color: var(--ctp-lavender) !important;
}

/* Alert styling */
.alert {
    background-color: var(--ctp-surface0) !important;
    border: 1px solid var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.alert-info {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-blue) !important;
    color: var(--ctp-blue) !important;
}

.alert-success {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-green) !important;
    color: var(--ctp-green) !important;
}

.alert-warning {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-yellow) !important;
    color: var(--ctp-yellow) !important;
}

.alert-danger {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-red) !important;
    color: var(--ctp-red) !important;
}

/* Modal styling */
.modal-content {
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface0) !important;
}

.modal-header {
    border-bottom: 1px solid var(--ctp-surface0) !important;
}

.modal-footer {
    border-top: 1px solid var(--ctp-surface0) !important;
}

/* Dropdown styling */
.dropdown-menu {
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface0) !important;
}

.dropdown-item {
    color: var(--ctp-subtext0) !important;
}

.dropdown-item:hover {
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

/* Pagination styling */
.page-link {
    background-color: var(--ctp-mantle) !important;
    border-color: var(--ctp-surface0) !important;
    color: var(--ctp-blue) !important;
}

.page-link:hover {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-surface1) !important;
    color: var(--ctp-lavender) !important;
}

.page-item.active .page-link {
    background-color: var(--ctp-blue) !important;
    border-color: var(--ctp-sapphire) !important;
    color: var(--ctp-crust) !important;
}

/* Badge styling */
.badge {
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

.badge-primary {
    background-color: var(--ctp-blue) !important;
    color: var(--ctp-crust) !important;
}

.badge-success {
    background-color: var(--ctp-green) !important;
    color: var(--ctp-crust) !important;
}

.badge-warning {
    background-color: var(--ctp-yellow) !important;
    color: var(--ctp-crust) !important;
}

.badge-danger {
    background-color: var(--ctp-red) !important;
    color: var(--ctp-crust) !important;
}

/* Code styling */
code {
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-mauve) !important;
}

pre {
    background-color: var(--ctp-crust) !important;
    border: 1px solid var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

/* Blockquote styling */
blockquote {
    border-left: 5px solid var(--ctp-blue) !important;
    background-color: var(--ctp-surface0) !important;
    color: var(--ctp-subtext0) !important;
}

/* HR styling */
hr {
    border-color: var(--ctp-surface0) !important;
}

/* Input group styling */
.input-group-text {
    background-color: var(--ctp-surface0) !important;
    border-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

/* List styling */
.list-group-item {
    background-color: var(--ctp-mantle) !important;
    border-color: var(--ctp-surface0) !important;
    color: var(--ctp-text) !important;
}

.list-group-item:hover {
    background-color: var(--ctp-surface0) !important;
}

/* Jumbotron/Hero section styling */
.jumbotron {
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface0) !important;
}

/* Well styling (if used) */
.well {
    background-color: var(--ctp-surface0) !important;
    border: 1px solid var(--ctp-surface1) !important;
}

/* Panel styling (if used) */
.panel {
    background-color: var(--ctp-mantle) !important;
    border: 1px solid var(--ctp-surface0) !important;
}

.panel-heading {
    background-color: var(--ctp-surface0) !important;
    border-bottom: 1px solid var(--ctp-surface1) !important;
    color: var(--ctp-text) !important;
}

.panel-body {
    color: var(--ctp-subtext0) !important;
}

.panel-footer {
    background-color: var(--ctp-surface0) !important;
    border-top: 1px solid var(--ctp-surface1) !important;
}

/* Text colors override */
.text-muted {
    color: var(--ctp-overlay0) !important;
}

.text-primary {
    color: var(--ctp-blue) !important;
}

.text-success {
    color: var(--ctp-green) !important;
}

.text-info {
    color: var(--ctp-sapphire) !important;
}

.text-warning {
    color: var(--ctp-yellow) !important;
}

.text-danger {
    color: var(--ctp-red) !important;
}

/* Background colors override */
.bg-primary {
    background-color: var(--ctp-blue) !important;
}

.bg-success {
    background-color: var(--ctp-green) !important;
}

.bg-info {
    background-color: var(--ctp-sapphire) !important;
}

.bg-warning {
    background-color: var(--ctp-yellow) !important;
}

.bg-danger {
    background-color: var(--ctp-red) !important;
}

.bg-light {
    background-color: var(--ctp-surface0) !important;
}

.bg-dark {
    background-color: var(--ctp-crust) !important;
}

/* Additional customizations for better contrast */
.navbar-toggler {
    border-color: var(--ctp-surface0) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(198, 208, 245, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Scrollbar styling for webkit browsers */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--ctp-base);
}

::-webkit-scrollbar-thumb {
    background: var(--ctp-surface1);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ctp-surface2);
}