/* ============================================================
   TT Commercial Operating Model — Theme
   ============================================================ */

:root {
    --tt-primary: #000000;
    --tt-accent: #62D5B6;
    --tt-accent-hover: #4FC3A4;
    --tt-grey-30: #C6C6C6;
    --tt-grey-15: #E3E3E3;
    --tt-grey-5: #F6F6F6;
    --tt-success: #27AE60;
    --tt-danger: #E74C3C;
    --tt-warning: #F39C12;
    --tt-light-bg: #F6F6F6;
    --tt-dark-bg: #000000;
    --tt-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --tt-border-radius: 10px;
}

body {
    background-color: var(--tt-light-bg);
    font-family: 'Calibri', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1A1A1A;
}

/* ── Navbar ─────────────────────────────────────────────────── */

.tt-navbar {
    background: var(--tt-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    padding: 0.6rem 1rem;
}

.tt-navbar .navbar-brand {
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

.tt-navbar .nav-link {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.tt-navbar .nav-link:hover,
.tt-navbar .nav-link.active {
    color: #fff;
    background: rgba(98, 213, 182, 0.15);
}

.tt-navbar .nav-link.active {
    border-bottom: 2px solid var(--tt-accent);
}

/* ── Cards ──────────────────────────────────────────────────── */

.tt-card {
    background: #fff;
    border: none;
    border-radius: var(--tt-border-radius);
    box-shadow: var(--tt-card-shadow);
    transition: box-shadow 0.2s ease;
}

.tt-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.tt-card .card-header {
    background: transparent;
    border-bottom: 2px solid var(--tt-grey-15);
    font-weight: 600;
    color: var(--tt-primary);
    padding: 1rem 1.25rem 0.75rem;
}

/* ── Stat Cards (Dashboard) ─────────────────────────────────── */

.stat-card {
    border-left: 4px solid var(--tt-accent);
    padding: 1.25rem;
}

.stat-card.primary { border-left-color: var(--tt-primary); }
.stat-card.accent { border-left-color: var(--tt-accent); }
.stat-card.success { border-left-color: var(--tt-success); }
.stat-card.warning { border-left-color: var(--tt-warning); }
.stat-card.danger { border-left-color: var(--tt-danger); }

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--tt-primary);
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7F8C8D;
    margin-top: 0.3rem;
}

/* ── Tables ─────────────────────────────────────────────────── */

.tt-table {
    font-size: 0.88rem;
}

.tt-table thead th {
    background: var(--tt-primary);
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.7rem 0.75rem;
    border: none;
}

.tt-table tbody td {
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

.tt-table tbody tr:hover {
    background: rgba(98, 213, 182, 0.08);
}

/* ── RAG Status Badges ──────────────────────────────────────── */

.rag-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}

.rag-green { background: var(--tt-success); }
.rag-amber { background: var(--tt-warning); }
.rag-red { background: var(--tt-danger); }
.rag-grey { background: #BDC3C7; }

/* ── Buttons ────────────────────────────────────────────────── */

.btn-tt-primary {
    background: var(--tt-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.2s ease;
}

.btn-tt-primary:hover {
    background: #333333;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-tt-accent {
    background: var(--tt-accent);
    color: #000;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    transition: all 0.2s ease;
}

.btn-tt-accent:hover {
    background: var(--tt-accent-hover);
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(98, 213, 182, 0.3);
}

.btn-tt-secondary {
    background: transparent;
    color: var(--tt-primary);
    border: 2px solid var(--tt-grey-30);
    border-radius: 6px;
    font-weight: 500;
}

.btn-tt-secondary:hover {
    background: var(--tt-grey-5);
    color: var(--tt-primary);
    border-color: var(--tt-accent);
}

/* ── Forms ──────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: var(--tt-accent);
    box-shadow: 0 0 0 0.2rem rgba(98, 213, 182, 0.25);
}

.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--tt-primary);
}

/* ── Section Headers ────────────────────────────────────────── */

.section-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tt-primary);
    border-bottom: 2px solid var(--tt-accent);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* ── Footer ─────────────────────────────────────────────────── */

.tt-footer {
    border-top: 1px solid #E5E8EB;
    background: #fff;
}

/* ── Currency Formatting ────────────────────────────────────── */

.currency::before {
    content: "\00A3";
}

/* ── Responsive Tweaks ──────────────────────────────────────── */

@media (max-width: 768px) {
    .stat-card .stat-value {
        font-size: 1.4rem;
    }
    .tt-table {
        font-size: 0.8rem;
    }
}

/* ── Timesheets tab ──────────────────────────────────────────── */

.ts-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .78rem;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.ts-avatar-lg {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    flex-shrink: 0;
}

.ts-avatar-sm {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .68rem;
    color: #fff;
    flex-shrink: 0;
}

.ts-person-item {
    border-radius: 8px;
    transition: background .12s ease;
}
.ts-person-item:hover {
    background: rgba(98, 213, 182, .1);
}
.ts-person-item.ts-selected {
    background: rgba(98, 213, 182, .18);
}

.ts-person-list {
    overflow-y: visible;
}

.ts-det-week:hover {
    background: var(--tt-grey-5);
}