/* ================================
   CALENDAR BRAND COLORS
================================ */

/* Calendar Container */
.fc {
    font-family: "Rethink Sans", sans-serif;
}
.fc-time{
    color: #dff8eb;
}
/* Header Buttons */
.fc .fc-button {
    background: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
    color: #fff !important;
}

.fc .fc-button:hover {
    background: var(--brand-dark) !important;
}

.fc .fc-button-active {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
}

/* Today Highlight */
.fc .fc-day-today {
    background: var(--brand-light) !important;
}

/* Event Default */
.fc-event {
    background: var(--brand-main) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 2px 6px;
}

/* Event Hover */
.fc-event:hover {
    background: var(--brand-dark) !important;
}

/* Different Event Types */
.fc-event.primary {
    background: var(--brand-main) !important;
}

.fc-event.warning {
    background: var(--brand-yellow) !important;
    color: #222 !important;
}

.fc-event.danger {
    background: var(--brand-orange) !important;
}

.fc-event.success {
    background: #3cb371 !important;
}

/* Time Grid Lines */
.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--brand-light);
}

/* Header Title */
.fc-toolbar-title {
    color: var(--brand-dark);
    font-weight: 600;
}

/* ================================
   MENU TAB (MAIN MENU)
================================ */

/* Normal */
.menu-tab .nav-link {
    color: var(--brand-dark) !important;
    font-weight: 500;
}

/* Hover */
.menu-tab .nav-link:hover {
    color: var(--brand-main) !important;
}

/* Active */
.menu-tab .nav-link.active {
    color: var(--brand-orange) !important;   /* Active text */
    background: var(--brand-light) !important;
    border-color: var(--brand-main) !important;
    font-weight: 600;
}
/* ================================
   BRAND BUTTON COLORS
================================ */

/* PRIMARY → Main Teal */
.btn-primary {
    background: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}

/* SECONDARY → Dark Teal / Neutral */
.btn-secondary {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
    color: #fff !important;
}

.btn-secondary:hover {
    background: #011f20 !important;
}

/* INFO → Soft Teal */
.btn-info {
    background: var(--brand-light) !important;
    border-color: var(--brand-light) !important;
    color: var(--brand-dark) !important;
}

.btn-info:hover {
    background: #c6efdd !important;
}

/* SUCCESS → Fresh Green */
.btn-success {
    background: #3cb371 !important; /* mint green */
    border-color: #3cb371 !important;
    color: #fff !important;
}

.btn-success:hover {
    background: #2e8b57 !important;
}

/* WARNING → Brand Yellow */
.btn-warning {
    background: var(--brand-yellow) !important;
    border-color: var(--brand-yellow) !important;
    color: #222 !important;
}

.btn-warning:hover {
    background: #e6b800 !important;
}

/* DANGER → Brand Orange */
.btn-danger {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #e65c00 !important;
}

:root {
    /* Primary */
    --brand-main: #006a6a;
    --brand-dark: #022b2c;
    --brand-light: #dff8eb;

    /* Accent */
    --brand-yellow: #ffcd1c;
    --brand-cream: #fff0bc;
    --brand-orange: #ff6700;

    /* Text */
    --text-main: #022b2c;
    --text-muted: #6c757d;

    /* Backgrounds */
    --bg-main: #ffffff;
    --bg-soft: #f8fffb;
}

/* ===============================
   GLOBAL FONT
================================= */
body,
.navbar,
.sidebar,
.btn,
.card,
.modal,
.form-control {
    font-family: 'Rethink Sans', sans-serif;
}

/* ===============================
   ROOT COLORS
================================= */
:root {
    --primary-main: #006a6a;
    --primary-dark: #022b2c;
    --primary-light: #dff8eb;

    --accent-yellow: #ffcd1c;
    --accent-cream: #fff0bc;
    --accent-orange: #ff6700;
}

/* ===============================
   SIDEBAR
================================= */
.sidebar {
    background: linear-gradient(180deg, var(--primary-dark), var(--primary-main));
}

.sidebar .nav-item .nav-link {
    color: var(--primary-light);
}

.sidebar .nav-item .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar .nav-item.active .nav-link {
    background: var(--primary-main);
    color: #ffffff;
    font-weight: 600;
}

.sidebar-brand {
    background: var(--primary-dark);
    color: var(--accent-yellow);
}

/* ===============================
   TOP NAVBAR
================================= */
.topbar {
    background: #ffffff;
    border-bottom: 2px solid var(--primary-light);
}

.topbar .nav-link {
    color: var(--primary-dark);
}

.topbar .nav-link:hover {
    color: var(--primary-main);
}

/* ===============================
   BUTTONS
================================= */
.btn-primary {
    background-color: var(--primary-main);
    border-color: var(--primary-main);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-warning {
    background-color: var(--accent-yellow);
    border-color: var(--accent-yellow);
    color: #222;
}

.btn-warning:hover {
    background-color: #e6b800;
}

/* Accent Button */
.btn-accent {
    background: var(--accent-orange);
    color: #fff;
    border: none;
}

.btn-accent:hover {
    background: #e65c00;
}

/* ===============================
   CARDS
================================= */
.card {
    border-radius: 12px;
    border: 1px solid var(--primary-light);
}

.card-header {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

/* ===============================
   FORMS
================================= */
.form-control:focus {
    border-color: var(--primary-main);
    box-shadow: 0 0 0 0.2rem rgba(0, 106, 106, 0.25);
}

/* ===============================
   TABLES
================================= */
.table thead th {
    background: var(--primary-main);
    color: #ffffff;
    border: none;
}

.table tbody tr:hover {
    background: var(--primary-light);
}

/* ===============================
   BADGES
================================= */
.badge-primary {
    background: var(--primary-main);
}

.badge-warning {
    background: var(--accent-yellow);
    color: #222;
}

.badge-accent {
    background: var(--accent-orange);
}

/* ===============================
   DROPDOWNS
================================= */
.dropdown-menu {
    border-radius: 10px;
    border: 1px solid var(--primary-light);
}

.dropdown-item:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ===============================
   PROGRESS BAR
================================= */
.progress-bar {
    background-color: var(--primary-main);
}

/* ===============================
   LOGIN PAGE
================================= */
.bg-login-image,
.bg-register-image,
.bg-password-image {
    background: linear-gradient(135deg, var(--primary-main), var(--accent-orange));
}

.login-card {
    border-radius: 15px;
}

/* ===============================
   FOOTER
================================= */
footer.sticky-footer {
    background: var(--primary-light);
    color: var(--primary-dark);
}

/* ===============================
   SCROLLBAR (OPTIONAL)
================================= */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-main);
    border-radius: 4px;
}