/* ============================
   Cornerstone Academy Theme
   Sage Green + Dark Mode
   ============================ */

/* Base colors */
:root {
    --primary: #8FAF9F;        /* Sage green */
    --primary-dark: #6E8F80;   /* Darker sage */
    --accent: #BFD8CC;         /* Light sage */
    --bg: #F5F7F5;             /* Soft gray-green */
    --text: #1A1A1A;
    --card-bg: #FFFFFF;

    --transition: 0.25s ease;
}

/* Dark mode overrides */
.dark-mode {
    --bg: #121212;
    --card-bg: #1E1E1E;
    --text: #EAEAEA;
    --primary: #6E8F80;
    --primary-dark: #4F6F63;
    --accent: #3A4A44;
}

/* Global styles */
body {
    background: var(--bg);
    color: var(--text);
    transition: background var(--transition), color var(--transition);
}

/* Header bar */
.navbar {
    background: var(--primary) !important;
    border-bottom: 3px solid var(--primary-dark);
}

/* Cards */
.ca-card {
    background: var(--card-bg);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: background var(--transition), box-shadow var(--transition);
}

/* Buttons */
.btn-ca {
    background: var(--primary);
    color: #fff;
    border: none;
    transition: background var(--transition);
}

.btn-ca:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* Tables */
.table-ca th {
    background: var(--primary);
    color: #fff;
}

.table-ca td, .table-ca th {
    vertical-align: middle;
}

/* Dark mode table tweaks */
.dark-mode .table-ca th {
    background: var(--primary-dark);
}

/* Footer */
footer {
    margin-top: 40px;
    padding: 20px 0;
    text-align: center;
    color: var(--text);
    opacity: 0.7;
}

/* ============================================
   DARK MODE TEXT OVERRIDES (Fix unreadable text)
   ============================================ */

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

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6,
.dark-mode p,
.dark-mode span,
.dark-mode strong,
.dark-mode small,
.dark-mode label,
.dark-mode th,
.dark-mode td {
    color: var(--text) !important;
}

/* Dashboard-specific fixes */
.dark-mode .ca-card h2.h6,
.dark-mode .ca-card .text-muted {
    color: var(--text) !important;
}

/* Fix Bootstrap dropdowns in dark mode */
.dark-mode .dropdown-menu {
    background-color: #1E1E1E;
    color: var(--text);
    border-color: #333;
}

.dark-mode .dropdown-item {
    color: var(--text) !important;
}

.dark-mode .dropdown-item:hover {
    background-color: #2A2A2A;
}

/* Fix form controls in dark mode */
.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background-color: #222;
    color: var(--text);
    border-color: #444;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #888;
}

/* Fix buttons in dark mode */
.dark-mode .btn-outline-secondary {
    color: var(--text);
    border-color: #666;
}

.dark-mode .btn-outline-secondary:hover {
    background-color: #333;
}

/* Fix navbar text in dark mode */
.dark-mode .navbar-brand,
.dark-mode .nav-link {
    color: var(--text) !important;
}

/* ============================================
   Extra‑Large Mobile & Tablet UI (Option C)
   ============================================ */
@media (max-width: 991.98px) {

    /* Base font size for entire UI */
    html {
        font-size: 21px; /* Extra large, app-like */
    }

    body {
        font-size: 1rem; /* 21px baseline */
        line-height: 1.45;
    }

    /* Card spacing */
    .ca-card {
        padding: 1.75rem;
    }

    /* Inputs and buttons */
    .form-control,
    .btn {
        font-size: 1.05rem; /* ~22px */
        padding: 0.85rem 1.1rem; /* Larger tap targets */
        border-radius: 0.55rem;
    }

    /* Table text */
    .table-ca {
        font-size: 1.05rem; /* ~22px */
    }

    /* Minutes input fields */
    .minutes-input {
        font-size: 1.05rem;
        padding: 0.75rem;
    }

    /* Summary row */
    #totalCell {
        font-size: 1.1rem;
        padding: 0.75rem;
    }

    /* Weekly summary text */
    #weekSummary {
        font-size: 1rem;
        margin-top: 0.4rem;
    }

    /* Floating bar */
    #floatingBar {
        padding: 16px 20px;
    }

    #floatingTotal {
        font-size: 1.15rem; /* ~24px */
    }

    #floatingBar .btn {
        font-size: 1.15rem;
        padding: 0.9rem 1.35rem;
    }

    /* ============================================
       Extra‑Large Mobile Navigation Menu Scaling
       ============================================ */

    /* Make the offcanvas / hamburger menu panel larger */
    .offcanvas,
    .navbar-collapse {
        font-size: 1.25rem; /* ~26px text */
        padding: 1.5rem 1.75rem;
    }

    /* Make menu links bigger and easier to tap */
    .offcanvas a,
    .navbar-collapse a,
    .offcanvas .nav-link,
    .navbar-collapse .nav-link {
        font-size: 1.25rem; /* ~26px */
        padding: 1rem 0;    /* taller tap targets */
    }

    /* Increase spacing between menu items */
    .offcanvas .nav-item,
    .navbar-collapse .nav-item {
        margin-bottom: 0.5rem;
    }

    /* Make section headers larger and clearer */
    .offcanvas .nav-header,
    .navbar-collapse .nav-header {
        font-size: 1.35rem; /* ~28px */
        margin-top: 1.25rem;
        margin-bottom: 0.75rem;
    }

    /* Make the close button easier to tap */
    .offcanvas .btn-close {
        transform: scale(1.6);
        margin-right: 0.35rem;
    }
}