/* ===========================================================
   GLOBAL THEME VARIABLES (DEFAULT LIGHT MODE)
   =========================================================== */

:root {
    /* Backgrounds */
    --bg: #f5f6f7;
    --bg-card: #ffffff;

    /* Text colors */
    --text: #222;
    --text-muted: #666;

    /* Borders */
    --border: #dcdcdc;

    /* DEFAULT primary = student green, will be overridden per role */
    --primary: #238636;
    --primary-light: #2ea043;
}

/* ===========================================================
   ROLE THEMES
   =========================================================== */

/* STUDENT — FACEBOOK BLUE / GOVEXAM STYLE */
.role-student {
    --primary: #1877f2;
    /* Facebook blue */
    --primary-light: #3b8bff;
    /* lighter blue */
    --bg-card: #ffffff;
    --bg: #eef2f7;
    /* soft bluish background */
}

/* TEACHER — CLEAN BLUE */
.role-teacher {
    --primary: #0078ff;
    --primary-light: #2ea8ff;
}

/* ADMIN — RED */
.role-admin {
    --primary: #d7263d;
    --primary-light: #ff3b53;
}

/* SUPERUSER — GOLD */
.role-superuser {
    --primary: #c59d00;
    --primary-light: #ffcd32;
}

/* ===========================================================
   DARK MODE OVERRIDES
   =========================================================== */

.dark-mode {
    --bg: #0d1117;
    --bg-card: #161b22;

    --text: #e6edf3;
    --text-muted: #8b949e;

    --border: #30363d;
}

/* ===========================================================
   GLOBAL BASE STYLING
   =========================================================== */

body {
    background: var(--bg);
    color: var(--text);
    transition: background 0.25s ease, color 0.25s ease;
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Anchor links */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-light);
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: background 0.25s ease, color 0.25s ease;
}

/* Header bar (set inside _header.php but controlled by CSS vars) */
header,
.header-bar {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Role Badge */
.badge-role {
    background: var(--primary-light);
    color: #fff !important;
}

/* Buttons */
button,
.button {
    background: var(--primary);
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
}

button:hover,
.button:hover {
    background: var(--primary-light);
}

/* ===========================================================
   SECTION TINT CARDS (Announcements / Profile / Products)
   =========================================================== */

.section-reminders {
    background: rgba(24, 119, 242, 0.10);
    border-left: 4px solid var(--primary);
}

.section-profile {
    background: rgba(46, 160, 67, 0.10);
    border-left: 4px solid var(--primary-light);
}

.section-products {
    background: rgba(255, 193, 7, 0.10);
    border-left: 4px solid #ffc107;
}

.section-continue {
    background: rgba(0, 200, 83, 0.10);
    border-left: 4px solid #00c853;
}

.section-suggestions {
    background: rgba(0, 150, 136, 0.10);
    border-left: 4px solid #009688;
}

/* ===========================================================
   PRODUCT ICONS
   =========================================================== */

.product-icon {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 8px;
    vertical-align: middle;
}

/* ===========================================================
   PROFILE PHOTO
   =========================================================== */

.profile-photo {
    width: 55px;
    height: 55px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 8px;
}

/* ===========================================================
   TABLE STYLING
   =========================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

th,
td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

th {
    background: var(--bg-card);
    color: var(--text);
    font-weight: 600;
}

/* ===========================================================
   STATUS PILLS (active/expired/pending)
   =========================================================== */

.status-pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Active */
.status-active {
    background: rgba(46, 160, 67, 0.15);
    color: var(--primary);
}

/* Expired */
.status-expired {
    background: rgba(255, 59, 83, 0.15);
    color: #d7263d;
}

/* Pending */
.status-pending {
    background: rgba(255, 193, 7, 0.15);
    color: #c79b00;
}

/* ===========================================================
   REMINDER COLORS
   =========================================================== */

.reminder {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.88rem;
}

/* Danger */
.reminder.red {
    background: rgba(255, 59, 83, 0.15);
    border: 1px solid rgba(255, 59, 83, 0.3);
    color: #ff3b53;
}

/* Warning */
.reminder.yellow {
    background: rgba(255, 220, 0, 0.15);
    border: 1px solid rgba(255, 220, 0, 0.3);
    color: #7a5a00;
}

/* Info */
.reminder.blue {
    background: rgba(0, 123, 255, 0.15);
    border: 1px solid rgba(0, 123, 255, 0.3);
    color: #0056b3;
}

/* Success */
.reminder.green {
    background: rgba(46, 160, 67, 0.15);
    border: 1px solid rgba(46, 160, 67, 0.3);
    color: #2ea043;
}

/* ===========================================================
   FOOTER LINKS
   =========================================================== */

.footer-links {
    margin-top: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

.footer-links a {
    color: var(--primary-light);
}

.footer-links a:hover {
    text-decoration: underline;
}

/* ===========================================================
   RESPONSIVENESS
   =========================================================== */

@media (max-width: 600px) {
    .card {
        padding: 14px;
    }

    table {
        font-size: 0.8rem;
    }

    .header-logo {
        height: 38px !important;
    }
}