/* ===========================
   TableButler - Site.css
   =========================== */

/* Color palette based on logo */
:root {
    --tb-bg: #101B26; /* dark navy */
    --tb-bg-dark: #08131F; /* deeper navy */
    --tb-text: #C6C3BC; /* light beige text */
    --tb-muted: #5F6264; /* muted grey */
    --tb-accent: #C6C3BC; /* accent color */
}

/* Global page styling */
html,
body {
    height: 100%;
}

body {
    background-color: var(--tb-bg);
    color: var(--tb-text);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    padding-top: 50px; /* space for fixed navbar */
}

/* Links */
a {
    color: var(--tb-accent);
    text-decoration: none; /* no underline by default */
}

    a:hover,
    a:focus {
        color: #ffffff;
        text-decoration: underline; /* underline only on hover/focus */
    }


/* =========================================================
   Admin top banner
   ========================================================= */
.tb-admin-banner {
    width: 100%;
    background-color: #0b1724; /* dark strip */
    text-align: center;
    padding: 6px 0;
    font-weight: 700;
    letter-spacing: 0.03em;
}

    /* Make the link inherit the light text colour and pop a bit */
    .tb-admin-banner a {
        color: #f3e6c4;
        text-decoration: none;
        font-size: 1.05rem;
    }

        .tb-admin-banner a:hover,
        .tb-admin-banner a:focus {
            text-decoration: underline;
        }




/* Bootstrap navbar overrides */
.navbar-inverse {
    background-color: var(--tb-bg-dark);
    border-color: var(--tb-bg-dark);
}

    .navbar-inverse .navbar-brand,
    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-text {
        color: var(--tb-text);
    }

        .navbar-inverse .navbar-brand:hover,
        .navbar-inverse .navbar-nav > li > a:hover {
            color: #ffffff;
        }

/* Container tweaks */
.body-content {
    padding-top: 15px;
    padding-bottom: 20px;
}

/* Footer */
footer {
    color: var(--tb-text);
}

/* ===========================
   Home page hero (logo + tagline)
   =========================== */

.tb-home-hero {
    /* center logo + text vertically in viewport,
       accounting for navbar + footer */
    min-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.tb-hero-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
}

.tb-home-tagline {
    margin-top: 20px;
    font-size: 1.2em;
}


/* Region strip on home page */
.tb-region-strip {
    width: 100%;
    padding: 20px 0 10px 0;
    text-align: center;
}

.tb-region-strip-inner {
    margin: 0 auto;
    max-width: 960px;
}

.tb-region-heading {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.tb-region-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tb-region-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #ccc;
    text-decoration: none;
    color: #f5f5f5;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Mobile: tighter spacing */
@media (max-width: 600px) {
    .tb-region-strip {
        padding: 16px 0 8px 0;
    }

    .tb-region-heading {
        font-size: 1.2rem;
    }

    .tb-region-pill {
        font-size: 0.85rem;
        padding: 3px 10px;
    }
}




/* ===========================
   Breadcrumb bar
   =========================== */

.tb-breadcrumb {
    background-color: var(--tb-bg-dark);
    border-radius: 4px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 8px 15px;
    list-style: none;
    display: flex;
    align-items: center;
}

    .tb-breadcrumb > li > a,
    .tb-breadcrumb > li {
        color: var(--tb-text);
    }

        /* separator: space / space */
        .tb-breadcrumb > li + li:before {
            content: " / ";
            padding: 0 6px;
            color: var(--tb-muted);
        }

    /* current page in breadcrumb */
    .tb-breadcrumb > .active {
        color: var(--tb-text);
        font-weight: 600;
    }

/* ===========================
   Admin layout + menu (flexbox)
   =========================== */

/* FINAL override for admin layout – make SURE it's flex and side-by-side */
.tb-admin-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 32px;
    margin-top: 10px;
}

/* left column width */
.tb-admin-menu-col {
    flex: 0 0 230px !important; /* fixed-ish width for menu */
}

/* right column takes the rest */
.tb-admin-content-col {
    flex: 1 1 auto !important; /* right column takes remaining width */
    min-width: 0;
}

.tb-admin-menu {
    margin-bottom: 20px;
}

    .tb-admin-menu h4 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    /* normal admin menu links */
    .tb-admin-menu .nav > li > a {
        color: var(--tb-text);
        background-color: transparent;
        text-decoration: none;
    }

        .tb-admin-menu .nav > li > a:hover,
        .tb-admin-menu .nav > li > a:focus {
            color: #ffffff;
            background-color: transparent;
            text-decoration: underline;
        }

    /* disabled / future items */
    .tb-admin-menu .disabled > a {
        color: var(--tb-muted);
        cursor: default;
        text-decoration: none;
        pointer-events: none; /* not clickable */
    }

/* Stack vertically on very small screens */
@media (max-width: 768px) {
    .tb-admin-layout {
        flex-direction: column !important;
    }

    .tb-admin-menu-col,
    .tb-admin-content-col {
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

/* ===========================
   Tables / forms / buttons
   =========================== */

.table {
    background-color: var(--tb-bg-dark);
    color: var(--tb-text);
}

    .table > thead > tr > th {
        border-bottom: 2px solid var(--tb-muted);
    }

    .table > tbody > tr > td,
    .table > thead > tr > th {
        border-color: var(--tb-muted);
    }

.form-control,
.btn {
    border-radius: 3px;
}

.btn-primary {
    background-color: var(--tb-accent);
    border-color: var(--tb-accent);
    color: #000;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #ffffff;
        border-color: #ffffff;
        color: #000;
    }

/* Validation messages */
.field-validation-error {
    color: #ff8080;
}

.input-validation-error {
    border-color: #ff8080;
}