/*
 * Multi-Tenant Application – Generic Styling
 * CSS variables injected via inline styles in templates
 */

/* ── CSS Variables ──────────────────────────────────── */
:root {
    --app-primary: #3eb649;
    --app-primary-dark: #2d9436;
    --app-secondary: #1a3a52;
    --app-accent: #e50020;
}

/* ── Text / links ───────────────────────────────────── */
::selection {
    background: rgba(62, 182, 73, .9);
    color: #fff;
}

::-moz-selection {
    background: rgba(62, 182, 73, .9);
    color: #fff;
}

.text-primary {
    color: var(--app-primary) !important;
}

/* ── Sidebar – dark background ──────────────────────── */
.page-wrapper .sidebar-wrapper.sidebar-dark {
    background-color: var(--app-secondary) !important;
}

.sidebar-footer {
    background-color: var(--app-secondary) !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

/* Active / hover item accent colour */
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active > a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover > a,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu .sidebar-dropdown.active > a {
    color: var(--app-primary) !important;
}

.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li.active i,
.page-wrapper .sidebar-wrapper.sidebar-dark .sidebar-menu li:hover i {
    background-color: rgba(62, 182, 73, .15) !important;
    color: var(--app-primary) !important;
}

/* Sidebar menu links – default override */
.page-wrapper .sidebar-wrapper .sidebar-menu li.active > a,
.page-wrapper .sidebar-wrapper .sidebar-menu li:hover > a {
    color: var(--app-primary) !important;
}

.page-wrapper .sidebar-wrapper .sidebar-menu li.active i,
.page-wrapper .sidebar-wrapper .sidebar-menu li:hover i {
    background-color: rgba(62, 182, 73, .1) !important;
}

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--app-primary-dark) !important;
    border-color: var(--app-primary-dark) !important;
}

.btn-soft-primary {
    background-color: rgba(62, 182, 73, .1) !important;
    color: var(--app-primary) !important;
    border-color: transparent !important;
}

.btn-soft-primary:hover {
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

.btn-outline-primary {
    border-color: var(--app-primary) !important;
    color: var(--app-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--app-primary) !important;
    color: #fff !important;
}

/* ── Backgrounds ────────────────────────────────────── */
.bg-primary {
    background-color: var(--app-primary) !important;
}

/* Login page radial gradient */
.bg-circle-gradiant {
    background: radial-gradient(
        circle at 50% 50%,
        rgba(62, 182, 73, .08) 0,
        rgba(62, 182, 73, .08) 33.333%,
        rgba(62, 182, 73, .14) 33.333%,
        rgba(62, 182, 73, .14) 66.666%,
        rgba(62, 182, 73, .20) 66.666%,
        rgba(62, 182, 73, .20) 99.999%
    ) !important;
}

/* ── Badges / pills ─────────────────────────────────── */
.badge.bg-primary,
.badge-primary {
    background-color: var(--app-primary) !important;
}

/* ── Borders ────────────────────────────────────────── */
.border-primary {
    border-color: var(--app-primary) !important;
}

/* ── Forms ──────────────────────────────────────────── */
.form-control:focus {
    border-color: var(--app-primary) !important;
    box-shadow: none !important;
}

.form-check-input:focus {
    border-color: var(--app-primary) !important;
    box-shadow: none !important;
}

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

/* ── Accordion ──────────────────────────────────────── */
.accordion .accordion-item .accordion-button:before {
    color: var(--app-primary) !important;
}

.accordion .accordion-item .accordion-button:not(.collapsed) {
    color: var(--app-primary) !important;
}

/* ── Pagination ─────────────────────────────────────── */
.page-link {
    color: var(--app-primary) !important;
}

.page-link:hover {
    color: var(--app-primary-dark) !important;
}

.page-item.active .page-link {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
    color: #fff !important;
}

/* ── Table ──────────────────────────────────────────── */
.table-primary {
    background-color: rgba(62, 182, 73, .1) !important;
}

/* ── Social / misc ──────────────────────────────────── */
.social-icon li a:hover {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

/* ── FullCalendar (timesheets) ──────────────────────── */
.fc .fc-daygrid-day-number,
.fc .fc-col-header-cell-cushion {
    color: var(--app-primary) !important;
}

.fc .fc-button,
.fc .fc-button:focus,
.fc .fc-button:active {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

.fc .fc-button:hover {
    background-color: var(--app-primary-dark) !important;
    border-color: var(--app-primary-dark) !important;
}

.fc-event-main,
.fc-daygrid-dot-event .fc-daygrid-event-dot,
.fc-h-event {
    background-color: var(--app-primary) !important;
    border-color: var(--app-primary) !important;
}

/* ── Breadcrumb ─────────────────────────────────────── */
.breadcrumb-item a {
    color: var(--app-primary) !important;
}

/* ── Logo and branding ──────────────────────────────── */
.app-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--app-primary);
    color: #fff;
    font-weight: 900;
    font-size: 1.15rem;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    flex-shrink: 0;
    letter-spacing: -1px;
}

.app-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.app-brand-text .brand-name {
    color: var(--app-primary);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .3px;
    font-family: Arial, Helvetica, sans-serif;
}

.app-brand-text .brand-sub {
    color: rgba(255, 255, 255, .85);
    font-weight: 900;
    font-size: .42rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 2px;
}

/* Variant for light backgrounds (top header) */
.app-brand-text.on-light .brand-sub {
    color: #2d3748;
}

/* ── Login logo ─────────────────────────────────────── */
.app-login-logo {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none !important;
}

.app-login-logo .app-logo-mark {
    width: 44px;
    height: 44px;
    font-size: 1.45rem;
    border-radius: 8px;
}

.app-login-logo .brand-name {
    color: var(--app-primary);
    font-size: 1.1rem;
}

.app-login-logo .brand-sub {
    color: var(--app-secondary);
    font-size: .5rem;
    letter-spacing: 2px;
}

.app-tagline {
    font-size: .72rem;
    color: #6c757d;
    letter-spacing: .8px;
    margin-top: .35rem;
}

/* ── Top-header logo responsive fix ────────────────── */
/* The theme hides .logo-icon on desktop; show app mark inline */
.page-wrapper .page-content .top-header .header-bar .logo-icon .big {
    display: flex !important;
    align-items: center;
}

/* Keep the small icon only on xs */
@media (min-width: 768px) {
    .page-wrapper .page-content .top-header .header-bar .logo-icon .big {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .page-content .top-header .header-bar .logo-icon .big {
        display: none !important;
    }

    .page-wrapper .page-content .top-header .header-bar .logo-icon .app-logo-mark {
        display: inline-flex !important;
    }
}