/* Cold Steel Theme for Ludamus - Fantasy TTRPG Style */

/* Theme colors */
:root {
    /* Primary colors - True Steel Blue */
    --cold-steel-primary: #4682B4;
    --cold-steel-primary-dark: #3A6FA0;
    --cold-steel-primary-darker: #2E5A87;
    
    /* Accent colors */
    --cold-steel-gold: #d4a574;
    --cold-steel-gold-light: #e8c9a8;
    --cold-steel-gold-dark: #b88854;
    
    /* Status colors */
    --cold-steel-success: #5a8b6f;
    --cold-steel-success-light: #7ba590;
    --cold-steel-success-dark: #466957;
    
    --cold-steel-danger: #8b4a5c;
    --cold-steel-danger-light: #a66575;
    --cold-steel-danger-dark: #6d3a48;
    
    --cold-steel-warning: #d4a574;
    --cold-steel-info: #5F9EA0;  /* CadetBlue - complements SteelBlue */
    --cold-steel-info-dark: #4F8A8B;
    
    /* Background */
    --cold-steel-bg-parchment: #fdfcfa;
}

/* Subtle parchment background for the entire page */
body {
    background-color: var(--cold-steel-bg-parchment);
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(90, 139, 111, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(212, 165, 116, 0.03) 0%, transparent 50%);
}

/* Modal backdrop styling - show properly positioned backdrop for status modals */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0.5;
    z-index: 1040;
}

/* Main content container with subtle styling */
main .container,
.content .container,
body>.container:not(.navbar .container) {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}


/* Ensure navbar container has no background */
.navbar .container {
    background-color: transparent !important;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

/* Bootstrap overrides for Cold Steel theme */
:root {
    --bs-primary: var(--cold-steel-primary);
    --bs-primary-rgb: 70, 130, 180;  /* RGB values for SteelBlue */
    --bs-primary-bg-subtle: #e6f1f8;
    --bs-primary-border-subtle: #c8dce9;
    --bs-link-color: var(--cold-steel-primary);
    --bs-link-hover-color: var(--cold-steel-primary-dark);
}

/* Primary button styles - cold steel blue */
.btn-primary {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--cold-steel-primary-dark);
    border-color: var(--cold-steel-primary-dark);
    color: white;
    box-shadow: 0 0.25rem 0.5rem rgba(70, 130, 180, 0.3);
}

.btn-primary:focus,
.btn-primary:active {
    background-color: var(--cold-steel-primary-darker);
    border-color: var(--cold-steel-primary-darker);
    box-shadow: 0 0 0 0.25rem rgba(70, 130, 180, 0.5);
    color: white;
}

/* Outline primary button */
.btn-outline-primary {
    color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
}

.btn-outline-primary:hover {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
    color: white;
}

/* Text primary */
.text-primary {
    color: var(--cold-steel-primary) !important;
}

/* Background primary */
.bg-primary {
    background-color: var(--cold-steel-primary) !important;
}

/* Navbar with cold steel gradient */
.navbar.bg-primary {
    background: linear-gradient(135deg, var(--cold-steel-primary) 0%, var(--cold-steel-primary-dark) 100%) !important;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

/* Navbar text should be light on dark background */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    transition: all 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--cold-steel-gold);
}

.navbar-dark .navbar-brand {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-dark .navbar-brand:hover {
    color: var(--cold-steel-gold);
}

/* Border primary */
.border-primary {
    border-color: var(--cold-steel-primary) !important;
}

/* Alert primary */
.alert-primary {
    background-color: rgba(70, 130, 180, 0.08);
    border-color: rgba(70, 130, 180, 0.3);
    color: #1a4166;
    border-left: 4px solid var(--cold-steel-primary);
}

/* Badge primary */
.badge.bg-primary {
    background-color: var(--cold-steel-primary) !important;
    color: white !important;
}

/* Make event tables brighter */
.table {
    --bs-table-bg: #ffffff;
    --bs-table-striped-bg: #fafbfc;
    --bs-table-hover-bg: #f5f6f8;
    background-color: white;
}

/* Add subtle box shadow to tables for depth */
.table-responsive {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border-radius: 0.375rem;
    border: 1px solid rgba(70, 130, 180, 0.1);
}

/* Fantasy-themed table headers */
.table thead th {
    background: linear-gradient(to bottom, rgba(70, 130, 180, 0.05), rgba(212, 165, 116, 0.03));
    color: #2d3a4d;
    border-bottom: 2px solid rgba(70, 130, 180, 0.2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* Event table specific styling */
.table tbody tr {
    background-color: white;
}

.table tbody tr:nth-of-type(odd) {
    background-color: #fafbfc;
}

.table tbody tr:hover {
    background-color: #f0e9f5;
}

/* Make sure text is dark and readable */
.table td,
.table th {
    color: #212529;
}

/* Navigation - ensure white text on purple background */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.85);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255, 255, 255, 1);
}

.navbar-dark .navbar-nav .nav-link.active {
    color: rgba(255, 255, 255, 1);
}

.navbar-dark .navbar-brand {
    color: rgba(255, 255, 255, 0.9);
}

.navbar-dark .navbar-brand:hover {
    color: rgba(255, 255, 255, 1);
}

/* Form controls focus */
.form-control:focus {
    border-color: var(--cold-steel-success);
    box-shadow: 0 0 0 0.25rem rgba(90, 139, 111, 0.25);
}

.form-select:focus {
    border-color: var(--cold-steel-success);
    box-shadow: 0 0 0 0.25rem rgba(90, 139, 111, 0.25);
}

/* Form control backgrounds */
.form-control,
.form-select {
    background-color: rgba(253, 252, 250, 0.7);
    border-color: rgba(212, 165, 116, 0.2);
}

.form-control:hover:not(:focus),
.form-select:hover:not(:focus) {
    border-color: rgba(212, 165, 116, 0.4);
}

/* Pagination */
.page-link {
    color: var(--cold-steel-primary);
    border-color: rgba(70, 130, 180, 0.2);
}

.page-link:hover {
    color: var(--cold-steel-gold);
    background-color: rgba(212, 165, 116, 0.08);
    border-color: rgba(212, 165, 116, 0.3);
}

.page-item.active .page-link {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
    color: white;
}

/* Progress bars */
.progress {
    background-color: rgba(70, 130, 180, 0.1);
    border: 1px solid rgba(70, 130, 180, 0.2);
}

.progress-bar {
    background: linear-gradient(to right, var(--cold-steel-primary), var(--cold-steel-success));
}

/* Switches and checkboxes */
.form-check-input:checked {
    background-color: var(--cold-steel-success);
    border-color: var(--cold-steel-success);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(90, 139, 111, 0.25);
}

.form-check-input {
    border-color: rgba(212, 165, 116, 0.3);
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar-thumb {
    background-color: #86c4a6;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #6fb193;
}

/* Links */
a {
    color: #5ba882;
}

a:hover {
    color: #4a8c6a;
}

/* Fantasy-themed cards */
.card {
    background-color: white;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e5eb;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cold-steel-primary) 0%, var(--cold-steel-gold) 50%, var(--cold-steel-success) 100%);
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Status badges - ensure they're visible */
.badge {
    font-weight: 500;
}

/* Success elements with forest green */
.badge.bg-success {
    background-color: var(--cold-steel-success) !important;
    color: white !important;
}

.btn-success {
    background-color: var(--cold-steel-success);
    border-color: var(--cold-steel-success);
    color: white;
    transition: all 0.3s ease;
}

.btn-success:hover {
    background-color: var(--cold-steel-success-dark);
    border-color: var(--cold-steel-success-dark);
    color: white;
}

.alert-success {
    background-color: rgba(90, 139, 111, 0.08);
    border-color: rgba(90, 139, 111, 0.3);
    color: #2d453a;
    border-left: 4px solid var(--cold-steel-success);
}

.text-success {
    color: var(--cold-steel-success) !important;
}

/* Warning elements with warm gold */
.badge.bg-warning {
    background-color: var(--cold-steel-warning) !important;
    color: white !important;
}

.btn-warning {
    background-color: var(--cold-steel-warning);
    border-color: var(--cold-steel-warning);
    color: white;
    transition: all 0.3s ease;
}

.btn-warning:hover {
    background-color: var(--cold-steel-gold-dark);
    border-color: var(--cold-steel-gold-dark);
    color: white;
}

.alert-warning {
    background-color: rgba(212, 165, 116, 0.1);
    border-color: rgba(212, 165, 116, 0.4);
    color: #604000;
    border-left: 4px solid var(--cold-steel-warning);
}

.text-warning {
    color: #A06B00 !important;
}

/* Danger/Error elements with rich burgundy */
.badge.bg-danger {
    background-color: var(--cold-steel-danger) !important;
    color: white !important;
}

.btn-danger {
    background-color: var(--cold-steel-danger);
    border-color: var(--cold-steel-danger);
    color: white;
}

.btn-danger:hover {
    background-color: var(--cold-steel-danger-dark);
    border-color: var(--cold-steel-danger-dark);
    color: white;
}

.alert-danger {
    background-color: rgba(139, 74, 92, 0.08);
    border-color: rgba(139, 74, 92, 0.3);
    color: #5a2a36;
    border-left: 4px solid var(--cold-steel-danger);
}

.text-danger {
    color: var(--cold-steel-danger) !important;
}

/* Info elements with steel blue shade */
.badge.bg-info {
    background-color: var(--cold-steel-info) !important;
    color: white !important;
}

.btn-info {
    background-color: var(--cold-steel-info);
    border-color: var(--cold-steel-info);
    color: white;
    transition: all 0.3s ease;
}

.btn-info:hover {
    background-color: var(--cold-steel-info-dark);
    border-color: var(--cold-steel-info-dark);
    color: white;
}

.alert-info {
    background-color: rgba(106, 125, 154, 0.08);
    border-color: rgba(106, 125, 154, 0.3);
    color: #2a3544;
    border-left: 4px solid var(--cold-steel-info);
}

.text-info {
    color: var(--cold-steel-info) !important;
}

/* Footer styling */
footer {
    background: linear-gradient(to bottom, rgba(70, 130, 180, 0.03), rgba(212, 165, 116, 0.02));
    border-top: 2px solid rgba(70, 130, 180, 0.15);
    margin-top: 3rem;
    padding-top: 2rem;
}

/* Footer links */
footer a {
    color: var(--cold-steel-primary);
}

footer a:hover {
    color: var(--cold-steel-gold);
    text-decoration: underline;
}

/* Add subtle accent borders and highlights */

/* Green accent for active/enrolled states */
.table tr.enrolled {
    border-left: 3px solid #008000;
}

.card.enrolled {
    border-left: 4px solid #008000;
}

/* Gold accent for important/featured items */
.table tr.featured {
    border-left: 3px solid #A06B00;
}

.card.featured {
    border-left: 4px solid #A06B00;
}

/* Form validation states */
.form-control.is-valid {
    border-color: #008000;
}

.form-control.is-valid:focus {
    border-color: #008000;
    box-shadow: 0 0 0 0.25rem rgba(0, 128, 0, 0.25);
}

.valid-feedback {
    color: #008000;
}

/* Icons with accent colors */
.icon-success {
    color: #008000;
}

.icon-warning {
    color: #A06B00;
}

/* Secondary button with light bronze */
.btn-secondary {
    background-color: var(--cold-steel-gold);
    border-color: var(--cold-steel-gold);
    color: white;
}

.btn-secondary:hover {
    background-color: #c49360;
    border-color: #c49360;
    color: white;
}

/* Outline secondary with purple accent */
.btn-outline-secondary {
    color: #a584bc;
    border-color: #c4a7d8;
}

.btn-outline-secondary:hover {
    border-color: #c4a7d8;
    background-color: #c4a7d8;
    color: white;
}

/* Event status indicators */
.event-status-live {
    color: #2d9b2d;
    font-weight: 600;
}

.event-status-upcoming {
    color: #b8822d;
}

/* Table hover with subtle green highlight */
.table tbody tr:hover {
    background-color: rgba(90, 139, 111, 0.05);
}

/* Active nav item with green underline */
.navbar-nav .nav-link.active {
    border-bottom: 2px solid #00a000;
    padding-bottom: 6px;
}

/* Session capacity indicators */
.capacity-available {
    color: #008000;
    font-weight: 500;
}

.capacity-limited {
    color: #A06B00;
    font-weight: 500;
}

.capacity-full {
    color: var(--cold-steel-danger);
    font-weight: 500;
}

/* Small accent details */
.breadcrumb {
    background-color: rgba(70, 130, 180, 0.05);
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(70, 130, 180, 0.1);
}

.breadcrumb-item.active {
    color: var(--cold-steel-primary);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--cold-steel-gold);
}

/* Dropdown hover with gold tint */
.dropdown-item:hover {
    background-color: rgba(212, 165, 116, 0.1);
    color: var(--cold-steel-primary);
}

/* Progress indicators */
.step-completed {
    background-color: #008000;
    color: white;
}

.step-current {
    background-color: #A06B00;
    color: white;
}

/* List group active item */
.list-group-item.active {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
}

.list-group-item:hover {
    background-color: rgba(90, 139, 111, 0.05);
}

.list-group-item {
    border-color: rgba(70, 130, 180, 0.2);
}

/* Custom tooltip colors */
.tooltip-success .tooltip-inner {
    background-color: #008000;
}

.tooltip-warning .tooltip-inner {
    background-color: #A06B00;
}

/* Blockquote with burgundy border and gold citation */
blockquote {
    border-left: 4px solid var(--cold-steel-danger);
    padding-left: 1rem;
    background-color: rgba(139, 74, 92, 0.05);
    padding: 1rem;
    margin: 1rem 0;
}

blockquote cite {
    color: var(--cold-steel-gold);
}

/* Specific event status badges */
.badge.event-live {
    background-color: var(--cold-steel-success) !important;
    color: white !important;
    position: relative;
    padding-left: 1.5rem;
}

.badge.event-live::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    width: 8px;
    height: 8px;
    background-color: #2d9b2d;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.badge.event-upcoming {
    background-color: var(--cold-steel-warning) !important;
    color: white !important;
}

/* Removed emoji content - let templates handle this */

.badge.event-past {
    background-color: #6c757d !important;
    color: white !important;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* Add smooth transitions */
.btn,
.form-control,
.nav-link,
.dropdown-item,
.list-group-item,
.table tbody tr,
a {
    transition: all 0.2s ease-in-out;
}

/* Fantasy-themed section headers */
h1,
h2,
h3 {
    color: #2d3a4d;
    font-weight: 600;
}

h2 {
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--cold-steel-gold) 0%, transparent 100%);
}

/* Event cards with role-playing theme */
.event-card {
    border-left: 4px solid var(--cold-steel-primary);
    padding-left: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.event-card:hover {
    border-left-color: var(--cold-steel-gold);
    background-color: #fafbfc;
}

/* Session enrollment buttons with quest theme */
.btn-enroll {
    position: relative;
    overflow: hidden;
}

/* Removed emoji content from enrollment button - let templates handle this */

/* Enrollment status colors */
.enrollment-open {
    color: #008000;
    font-weight: 500;
}

.enrollment-closed {
    color: #6c757d;
}

.proposal-open {
    color: #A06B00;
    font-weight: 500;
}

/* Focus outline with primary color */
*:focus {
    outline-color: var(--cold-steel-primary);
}

/* Custom radio and checkbox colors */
.form-check-input:checked {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='white'/%3e%3c/svg%3e");
}

/* Highlight important information */
.highlight-gold {
    background-color: rgba(212, 165, 116, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.highlight-green {
    background-color: rgba(90, 139, 111, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Custom hr with gradient */
hr {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, var(--cold-steel-primary), var(--cold-steel-gold), var(--cold-steel-success), var(--cold-steel-danger), var(--cold-steel-primary));
    opacity: 0.3;
    margin: 2rem 0;
}

/* Card hover effect */
.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(71, 6, 107, 0.15);
    transition: all 0.3s ease;
}

/* Button group with accent colors */
.btn-group .btn-outline-secondary.active {
    background-color: var(--cold-steel-primary);
    border-color: var(--cold-steel-primary);
    color: white;
}

.btn-group .btn {
    border-color: rgba(70, 130, 180, 0.3);
}

/* Tag colors */
.tag-purple {
    background-color: rgba(139, 74, 92, 0.1);
    color: var(--cold-steel-danger);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    border: 1px solid rgba(139, 74, 92, 0.2);
}

.tag-green {
    background-color: rgba(90, 139, 111, 0.1);
    color: var(--cold-steel-success);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    border: 1px solid rgba(90, 139, 111, 0.2);
}

.tag-gold {
    background-color: rgba(212, 165, 116, 0.1);
    color: var(--cold-steel-gold);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    border: 1px solid rgba(212, 165, 116, 0.2);
}

/* Custom gold outline button */
.btn-outline-gold {
    color: #A06B00;
    border-color: #A06B00;
}

.btn-outline-gold:hover {
    color: white;
    background-color: #A06B00;
    border-color: #A06B00;
}

/* Make the "It's a mistake" button bronze */
.btn-outline-secondary[href^="mailto"] {
    color: #c49360;
    border-color: var(--cold-steel-gold);
}

.btn-outline-secondary[href^="mailto"]:hover {
    color: white;
    background-color: var(--cold-steel-gold);
    border-color: var(--cold-steel-gold);
}

/* Theme selector form */
.theme-select-form {
    width: auto;
}