/* ==========================================================================
   TeamMates theme tokens
   One place to define the look. Components below only reference tokens, so
   per-customer CSS can re-skin the app by overriding :root variables.
   Loads after Bootstrap 5.3 and site.css, before the per-customer CSS.
   ========================================================================== */
:root {
    --tm-primary: #3d83ce;
    --tm-primary-hover: #336fb2;
    --tm-primary-soft: rgba(61, 131, 206, .12);
    --tm-page-bg: #f6f8fb;
    --tm-card-bg: #ffffff;
    --tm-text: #1a2233;
    --tm-text-muted: #5b6676;
    --tm-border: rgba(16, 24, 40, .08);
    --tm-radius: 12px;
    --tm-radius-sm: 8px;
    --tm-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08);
    --tm-shadow-md: 0 6px 16px rgba(16, 24, 40, .12);
    --tm-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* map onto Bootstrap 5.3 */
    --bs-body-font-family: var(--tm-font);
    --bs-body-color: var(--tm-text);
    --bs-border-radius: var(--tm-radius-sm);
    --bs-link-color: var(--tm-primary);
    --bs-link-hover-color: var(--tm-primary-hover);
}

/* ---- base ---------------------------------------------------------------- */
body {
    font-family: var(--tm-font);
    color: var(--tm-text);
    background-color: var(--tm-page-bg); /* per-customer background (inline style) overrides this */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--tm-text);
    letter-spacing: -0.01em;
}

.text-secondary, .text-muted {
    color: var(--tm-text-muted) !important;
}

/* ---- cards --------------------------------------------------------------- */
.card {
    background-color: var(--tm-card-bg);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    box-shadow: var(--tm-shadow-sm);
}

.card .card-img-top {
    border-top-left-radius: calc(var(--tm-radius) - 1px);
    border-top-right-radius: calc(var(--tm-radius) - 1px);
}

.card .rounded-start {
    border-top-left-radius: calc(var(--tm-radius) - 1px) !important;
    border-bottom-left-radius: calc(var(--tm-radius) - 1px) !important;
}

.card-title {
    font-weight: 600;
}

/* clickable cards lift on hover */
.hoverable {
    transition: box-shadow .15s ease, transform .15s ease;
}

.hoverable:hover {
    box-shadow: var(--tm-shadow-md);
    transform: translateY(-2px);
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
    border-radius: var(--tm-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.btn-primary {
    --bs-btn-bg: var(--tm-primary);
    --bs-btn-border-color: var(--tm-primary);
    --bs-btn-hover-bg: var(--tm-primary-hover);
    --bs-btn-hover-border-color: var(--tm-primary-hover);
    --bs-btn-active-bg: var(--tm-primary-hover);
    --bs-btn-active-border-color: var(--tm-primary-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--tm-primary);
    --bs-btn-border-color: var(--tm-primary);
    --bs-btn-hover-bg: var(--tm-primary);
    --bs-btn-hover-border-color: var(--tm-primary);
}

.btn:active {
    transform: translateY(1px);
}

/* ---- forms --------------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--tm-radius-sm);
    border-color: rgba(16, 24, 40, .15);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-soft);
}

.form-check-input:checked {
    background-color: var(--tm-primary);
    border-color: var(--tm-primary);
}

.form-label {
    font-weight: 600;
    margin-bottom: .25rem;
}

.input-group-text {
    border-radius: var(--tm-radius-sm);
    background-color: var(--tm-page-bg);
}

/* ---- navbar -------------------------------------------------------------- */
header .navbar {
    padding-top: .65rem;
    padding-bottom: .65rem;
    box-shadow: var(--tm-shadow-sm);
}

header .navbar .nav-link {
    border-radius: var(--tm-radius-sm);
    padding: .4rem .8rem;
    transition: background-color .15s ease;
}

header .navbar .nav-link:hover {
    background-color: var(--tm-primary-soft);
}

/* ---- tables -------------------------------------------------------------- */
.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}

.table thead th {
    font-weight: 600;
    color: var(--tm-text-muted);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* ---- stats / counters (home page) ---------------------------------------- */
.counter {
    color: var(--tm-primary);
    font-weight: 700;
}

/* ---- misc polish ---------------------------------------------------------- */
.modal-content {
    border-radius: var(--tm-radius);
    border: none;
    box-shadow: var(--tm-shadow-md);
}

.offcanvas {
    border-radius: 0;
}

.nav-tabs .nav-link {
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    font-weight: 600;
    color: var(--tm-primary);
}