:root {
    --tr-dark: #20252a;
    --tr-dark-soft: #2d333a;
    --tr-accent: #52b15a;
    --tr-accent-deep: #3e9448;
    --tr-card: #ffffff;
    --tr-border: #d8dfe4;
    --tr-muted: #68717a;
}

body {
    background: linear-gradient(180deg, #fbfbfb 0%, #f1f2f3 100%);
    color: var(--tr-dark);
    font: 400 16px/1.6 'Roboto Condensed', sans-serif;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .navbar, .brand strong {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

a { color: var(--tr-accent); }
a:hover { color: var(--tr-accent-deep); }
img { max-width: 100%; height: auto; }

.topbar, .nav-shell, .site-footer { background: var(--tr-dark); }
.topbar a, .nav-shell .nav-link, .site-footer, .site-footer a { color: #fff; }

.brandbar {
    background: #fff;
    border-bottom: 1px solid var(--tr-border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: var(--tr-dark);
}

.brand-mark {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: 700 1.4rem/1 'Oswald', sans-serif;
    background: linear-gradient(135deg, var(--tr-accent) 0%, #86cf72 100%);
}

.brand-copy { display: flex; flex-direction: column; }
.brand-copy small { color: var(--tr-muted); text-transform: none; font-size: 0.82rem; }

.btn-accent { color: #fff; background: var(--tr-accent); border-color: var(--tr-accent); }
.btn-accent:hover, .btn-accent:focus { color: #fff; background: var(--tr-accent-deep); border-color: var(--tr-accent-deep); }
.btn-outline-accent { color: var(--tr-accent); border-color: var(--tr-accent); }
.btn-outline-accent:hover { color: #fff; background: var(--tr-accent); }

.hero-panel, .sidebar-card, .feature-card, .content-card, .admin-card, .stats-card, .listing-card {
    background: var(--tr-card);
    border: 1px solid var(--tr-border);
    border-radius: 0;
    box-shadow: 0 8px 20px rgba(21, 28, 38, 0.06);
}

.hero-panel {
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(82, 177, 90, 0.18), transparent 28%),
        linear-gradient(135deg, #1f242a 0%, #343b42 100%);
    color: #fff;
}

.hero-kicker, .section-kicker {
    display: inline-block;
    color: #a6f1ab;
    font: 700 0.8rem/1 'Oswald', sans-serif;
    letter-spacing: 0.12em;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hero-stat {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
}

.hero-stat strong { display: block; font-size: 1.8rem; color: #fff; }
.sidebar-card, .content-card, .admin-card { padding: 1.25rem; }

.listing-card img, .gallery-preview {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #c9d6c0, #8ba884);
}

.listing-card .card-body { padding: 1.25rem; }

.meta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.meta-pill {
    font-size: 0.82rem;
    color: var(--tr-dark-soft);
    background: #edf7ee;
    border: 1px solid #d2ecd4;
    padding: 0.25rem 0.6rem;
}

.ad-slot {
    padding: 1rem;
    background: repeating-linear-gradient(135deg, #eef5ef, #eef5ef 12px, #e3efe5 12px, #e3efe5 24px);
    border: 1px dashed #a8caa9;
    text-align: center;
    color: var(--tr-dark-soft);
}

.ad-slot img {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.ad-image {
    width: auto;
    height: 250px;
    max-width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, #c9d6c0, #8ba884);
}

.notification-menu {
    position: relative;
}

.notification-toggle {
    position: relative;
    color: #fff;
    padding: 0;
    border: 0;
}

.notification-toggle:hover,
.notification-toggle:focus {
    color: #fff;
}

.notification-badge {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f0b429;
    color: #1e2329;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.notification-dropdown {
    width: min(28rem, calc(100vw - 2rem));
    border: 1px solid var(--tr-border);
    box-shadow: 0 12px 28px rgba(21, 28, 38, 0.18);
}

.notification-dropdown-header {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--tr-border);
    background: #f8faf9;
}

.notification-list {
    max-height: 28rem;
    overflow-y: auto;
}

.notification-item,
.notification-empty {
    padding: 0.9rem 1rem;
}

.notification-item + .notification-item {
    border-top: 1px solid #eef1f3;
}

.notification-item.is-unread {
    background: #fffbea;
}

.notification-item-title {
    display: block;
    color: var(--tr-dark);
}

.notification-item-message {
    color: var(--tr-muted);
    line-height: 1.45;
}

.notification-item-time {
    white-space: nowrap;
}

.calendar-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.calendar-shell {
    background: #fff;
    border: 1px solid #d8dee6;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 18px 34px rgba(20, 31, 46, 0.06);
}

.calendar-shell-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-bottom: 1px solid #dce3eb;
    flex-wrap: wrap;
}

.calendar-shell-left,
.calendar-shell-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.calendar-today-btn {
    border-radius: 999px;
    padding-inline: 1.1rem;
}

.calendar-arrow-group {
    display: inline-flex;
    gap: 0.4rem;
}

.calendar-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #cfd7e3;
    background: #fff;
    color: var(--tr-dark);
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
}

.calendar-icon-btn:hover {
    background: #eef4fb;
    color: var(--tr-dark);
}

.calendar-title-block strong {
    display: block;
    font: 700 2rem/1 'Oswald', sans-serif;
    letter-spacing: 0.03em;
}

.calendar-title-block span {
    display: block;
    margin-top: 0.2rem;
    color: var(--tr-muted);
    font-size: 0.88rem;
}

.calendar-shell-right .form-control {
    min-width: 12rem;
    border-radius: 999px;
}

.calendar-shell-right .btn {
    border-radius: 999px;
}

.calendar-month-header {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #fff;
}

.calendar-month-header div {
    padding: 0.7rem 0.5rem;
    text-align: center;
    color: #86633d;
    font: 700 0.78rem/1 'Oswald', sans-serif;
    letter-spacing: 0.08em;
    border-right: 1px solid #e2e8f0;
    text-transform: uppercase;
}

.calendar-month-header div:last-child {
    border-right: 0;
}

.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    background: #fff;
}

.calendar-month-cell {
    min-height: 9.7rem;
    padding: 0.6rem 0.55rem 0.75rem;
    border-right: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    background: #fff;
}

.calendar-month-cell:nth-child(7n) {
    border-right: 0;
}

.calendar-month-cell.is-outside-month {
    background: #fbfcfd;
}

.calendar-month-cell.is-outside-month .calendar-month-date,
.calendar-month-cell.is-outside-month .calendar-month-weekday {
    color: #a2adba;
}

.calendar-month-cell.is-today .calendar-month-date {
    background: #2465d1;
    color: #fff;
}

.calendar-month-cell-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.calendar-month-weekday {
    display: none;
    font-size: 0.72rem;
    color: #9ca6b4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.calendar-month-date {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    color: #132238;
    font: 700 0.98rem/1 'Roboto Condensed', sans-serif;
}

.calendar-month-events {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-height: 5.5rem;
}

.calendar-pill {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.45rem;
    padding: 0.16rem 0.45rem;
    border-radius: 0.45rem;
    background: var(--pill-bg, #d9ebff);
    color: var(--pill-text, #184d8c);
    text-decoration: none;
    line-height: 1.2;
    overflow: hidden;
}

.calendar-pill:hover {
    color: var(--pill-text, #184d8c);
    filter: brightness(0.98);
}

.calendar-pill-dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: var(--pill-dot, #3a7bd5);
    flex: 0 0 auto;
}

.calendar-pill-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 700;
}

.calendar-more-link {
    font-size: 0.78rem;
    color: #2465d1;
    text-decoration: none;
}

.calendar-empty-slot {
    display: block;
    min-height: 1.45rem;
}

.footer-title { color: #fff; }
.footer-links li + li { margin-top: 0.5rem; }
.footer-links a { text-decoration: none; }
.table-shell { border: 1px solid var(--tr-border); background: #fff; }
.table-responsive { -webkit-overflow-scrolling: touch; }
.admin-sidebar .list-group-item.active { background: var(--tr-accent); border-color: var(--tr-accent); }
.badge-status { background: #eef7ef; color: #245a28; border: 1px solid #c7e4ca; }
.form-control, .form-select { border-radius: 0; }

@media (max-width: 1199.98px) {
    .brand {
        gap: 0.75rem;
    }

    .brand-copy strong {
        font-size: 1.5rem;
    }

    .hero-panel {
        padding: 1.5rem;
    }

    .calendar-month-cell {
        min-height: 8.75rem;
    }
}

@media (max-width: 991.98px) {
    .topbar .container {
        justify-content: center !important;
        text-align: center;
    }

    .notification-dropdown {
        width: min(24rem, calc(100vw - 1.5rem));
    }

    .brandbar {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .brand {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }

    .brand-copy {
        align-items: center;
    }

    .search-box,
    .search-box .input-group {
        width: 100%;
    }

    .hero-stats {
        grid-template-columns: 1fr;
    }

    .hero-panel,
    .sidebar-card,
    .feature-card,
    .content-card,
    .admin-card,
    .stats-card,
    .listing-card .card-body {
        padding: 1rem;
    }

    .listing-card .card-body {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .meta-list {
        gap: 0.4rem;
    }

    .page-shell {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .site-footer {
        padding-top: 2.5rem !important;
    }

    .ad-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 250px;
    }

    .calendar-shell-toolbar,
    .calendar-shell-left,
    .calendar-shell-right {
        align-items: stretch;
    }

    .calendar-title-block strong {
        font-size: 1.7rem;
    }

    .calendar-shell-right {
        width: 100%;
    }

    .calendar-shell-right .form-control {
        flex: 1 1 12rem;
    }

    .calendar-month-cell {
        min-height: 7.75rem;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15px;
    }

    h1, .h1, .display-5 {
        font-size: clamp(2rem, 8vw, 2.8rem);
        line-height: 1.1;
    }

    h2, .h2, .h3 {
        line-height: 1.15;
    }

    .topbar .d-flex {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .brand-mark {
        width: 52px;
        height: 52px;
        font-size: 1.2rem;
    }

    .brand-copy strong {
        font-size: 1.35rem;
    }

    .brand-copy small {
        font-size: 0.78rem;
    }

    .hero-panel {
        padding: 1.25rem;
    }

    .hero-panel .lead {
        font-size: 1rem;
    }

    .hero-stat strong {
        font-size: 1.5rem;
    }

    .sidebar-card,
    .content-card,
    .admin-card,
    .feature-card {
        padding: 0.95rem;
    }

    .listing-card .card-body {
        padding: 0.95rem;
    }

    .meta-pill {
        font-size: 0.76rem;
        padding: 0.22rem 0.5rem;
    }

    .btn-accent,
    .btn-outline-accent {
        min-height: 44px;
    }

    .search-box .btn,
    .d-grid .btn {
        width: 100%;
    }

    .ad-slot {
        padding: 0.85rem;
    }

    .ad-image {
        max-height: 220px;
    }

    .table-shell table {
        min-width: 640px;
    }

    .calendar-shell {
        border-radius: 1.25rem;
    }

    .calendar-page-header {
        align-items: start;
    }

    .calendar-title-block strong {
        font-size: 1.45rem;
    }

    .calendar-month-header {
        display: none;
    }

    .calendar-month-grid {
        grid-template-columns: 1fr;
    }

    .calendar-month-cell,
    .calendar-month-cell:nth-child(7n) {
        border-right: 0;
    }

    .calendar-month-cell {
        min-height: 0;
        padding: 0.8rem 0.85rem;
    }

    .calendar-month-weekday {
        display: block;
    }

    .calendar-month-cell-head {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .calendar-month-events {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .topbar {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .brandbar {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .brand {
        gap: 0.6rem;
    }

    .navbar .btn-sm.btn-accent {
        width: 100%;
        margin-top: 0.75rem;
    }

    .hero-panel,
    .sidebar-card,
    .content-card,
    .admin-card,
    .feature-card {
        border-width: 1px;
    }

    .gallery-preview,
    .listing-card img {
        aspect-ratio: 4 / 3;
    }
}