/* Define theme color variable */
:root {
    /* 🌿 Core Theme Colors */
    --theme-color: #ffffff; /* White */
    --theme-bg: #06402B; /* Deep Green */
    --theme-font: #debe74; /* Soft Gold */
    --theme-border: #007bff; /* Bright Blue */
    /* 🧭 Menu / Navbar */
    --menu-bg: #06402B; /* Deep Green */
    --menu-font: #debe74; /* Soft Gold */
    /* 🔘 Buttons & Links */
    --button-bg: #06402B; /* Deep Green */
    --button-hover-bg: #04561C; /* Dark Forest Green */
    --button-text: #ffffff; /* White */
    /* 📋 Table & Grid */
    --table-header-bg: #05281B; /* Dark Olive Green */
    --table-header-font: #debe74; /* Soft Gold */
    --table-row-bg: #ffffff; /* White */
    --table-row-hover-bg: #f9f9f9; /* Light Gray */
    --table-border-color: #e0e0e0; /* Light Border Gray */
    /* 🖋 Text Colors */
    --text-color: #333333; /* Charcoal Gray */
    --muted-text: #999999; /* Medium Gray */
    --highlight: #ffd700; /* Bright Gold */
    /* 🧱 Status Colors (optional for booking status) */
    --status-waitlisted: #ffae42; /* Amber Orange */
    --status-confirmed: #4CAF50; /* Green */
    --status-cancelled: #f44336; /* Red */
    /* Status color palette */
    --status-green-bg: #d1fae5; /* light green */
    --status-green-text: #065f46; /* dark green */

    --status-red-bg: #fee2e2; /* light red */
    --status-red-text: #991b1b; /* dark red */

    --status-yellow-bg: #fef9c3; /* light yellow */
    --status-yellow-text: #92400e; /* dark yellow */
}

.bg-theme{
        background-color: var(--theme-color);
}
html {
    font-size: 14px;
    color:var(--theme-color)
}

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, .55);
    border-color: rgba(0, 0, 0, .1);
    position: relative;
}
.navbar {
    background-color: var( --menu-bg);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--menu-font);
}
.nav-item {
    font-size: 20px !important;
    color: var(--menu-font);
}
.nav-link {
    color: var(--menu-font);
}
h4 {
    color: var(--theme-font);
}
.tab-container
{
   /* background-color:var(--menu-bg);*/
}
.tab-content {
    background-color: #d6d6d6;
}
.section-heading {
    color: var(--theme-bg) !important;
    font-size: 2rem;
    font-weight: 700;
}
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
    .nav-item {
        font-size: 24px !important;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    /*margin-bottom: 60px;*/
}


/*body {*/
   /* background-color: var(--theme-color);*/
    /*color: white;
    font-family: Arial, sans-serif;
}*/
.body-container{
    overflow-y:hidden;
    max-width:99vw!important;
    padding-left:2px!important;
    padding-right:2px!important;
}

.required:after {
    color: red;
    content: " *";
}
.error {
    color: var( --theme-danger);
}
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border: 2px solid red !important;
    background-color: #fff0f0; /* light red background for visibility */
}

.full-width
{
    width:100%!important;
}
.hide{
    display:none !important;
}
.show{
    display:block!important;
}
a {
    text-decoration: none!important;
}
/* ✅ Hide horizontal scroll */
html, body {
    overflow-x: hidden;
}

/* ✅ Thin vertical scrollbar (for modern browsers) */
::-webkit-scrollbar {
    width: 6px; /* Adjust thickness */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track background */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar color */
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Darker on hover */
    }

/* ✅ For Firefox */
html {
    scrollbar-width: thin; /* Makes it thin */
    scrollbar-color: #888 #f1f1f1; /* Thumb and track colors */
}


.table-grid thead {
    background-color: var(--header-bg);
}

.table-grid th {
    color: var(--primary-color);
    font-weight: 600;
    border-color: var(--border-color);
}

.table-grid td {
    color: var(--text-color);
    border-color: var(--border-color);
}

.table-grid tr:hover {
    background-color: var(--secondary-color);
}

.bg-green-100 {
    background-color: var(--status-green-bg);
}

.text-green-700 {
    color: var(--status-green-text);
}

.bg-red-100 {
    background-color: var(--status-red-bg);
}

.text-red-700 {
    color: var(--status-red-text);
}

.bg-yellow-100 {
    background-color: var(--status-yellow-bg);
}

.text-yellow-700 {
    color: var(--status-yellow-text);
}

.inline-block {
    display: inline-block;
}

.rounded-full {
    border-radius: 9999px;
}

.text-xs {
    font-size: 0.75rem;
}

.font-semibold {
    font-weight: 600;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}