/* ============================================================
   iDoTutor — global UI theme
   A lightweight design system layered on Bootstrap 5.
   Goals: consistent, modern, touch-friendly (tablet-first).
   Loaded after Bootstrap in header.php so it can refine it.
   ============================================================ */

:root {
    --idt-primary:        #4f46e5;   /* indigo */
    --idt-primary-dark:   #4338ca;
    --idt-primary-soft:   #eef2ff;
    --idt-accent:         #0ea5e9;
    --idt-ink:            #1e293b;
    --idt-muted:          #64748b;
    --idt-surface:        #ffffff;
    --idt-bg:             #f5f7fb;
    --idt-radius:         14px;
    --idt-radius-sm:      10px;
    --idt-shadow:         0 6px 24px rgba(2, 6, 23, .06);
    --idt-shadow-hover:   0 12px 32px rgba(2, 6, 23, .12);

    /* Make Bootstrap components adopt the theme where they read these */
    --bs-primary:        #4f46e5;
    --bs-primary-rgb:    79, 70, 229;
    --bs-link-color:     #4f46e5;
    --bs-border-radius:  .9rem;
    --bs-body-color:     #1e293b;
}

body {
    background: var(--idt-bg);
    color: var(--idt-ink);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: .2px; }
h1 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
a { text-decoration: none; }

/* ---------- Brand-color reconciliation ----------
   Repaint Bootstrap's blue "primary" to the indigo theme everywhere,
   so legacy pages using bg-primary/text-primary match automatically. */
.bg-primary { background-color: var(--idt-primary) !important; }
.text-primary { color: var(--idt-primary) !important; }
.border-primary { border-color: var(--idt-primary) !important; }
.text-bg-primary { background-color: var(--idt-primary) !important; color: #fff !important; }
.link-primary, a.text-primary { color: var(--idt-primary) !important; }
.btn-outline-primary {
    --bs-btn-color: var(--idt-primary);
    --bs-btn-border-color: var(--idt-primary);
    --bs-btn-hover-bg: var(--idt-primary);
    --bs-btn-hover-border-color: var(--idt-primary);
    --bs-btn-active-bg: var(--idt-primary-dark);
    --bs-btn-active-border-color: var(--idt-primary-dark);
}

/* ---------- Top navbar ---------- */
.navbar.fixed-navbar {
    background: var(--idt-surface) !important;
    box-shadow: 0 2px 12px rgba(2, 6, 23, .06);
    border-bottom: 1px solid #eef2f7;
}
.navbar-brand { color: var(--idt-primary) !important; font-weight: 700; }
.navbar-toggler { border: 0; padding: .35rem .5rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem var(--idt-primary-soft); }

/* ---------- Offcanvas sidebar menu ---------- */
.offcanvas .navbar-nav .nav-link {
    border-radius: var(--idt-radius-sm);
    padding: .7rem .9rem;
    margin: 2px 6px;
    color: var(--idt-ink);
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
    min-height: 44px;             /* comfortable tap target on tablets */
    display: flex; align-items: center; gap: .55rem;
}
.offcanvas .navbar-nav .nav-link:hover,
.offcanvas .navbar-nav .nav-link:focus {
    background: var(--idt-primary-soft);
    color: var(--idt-primary-dark);
}
.offcanvas .navbar-nav .nav-link i { width: 20px; text-align: center; }
.offcanvas .submenu {
    list-style: none;
    padding-left: .6rem;
    margin-left: .9rem;
    border-left: 2px solid #e8edf5;
}
.offcanvas .submenu .nav-link { font-size: .94rem; font-weight: 400; }

/* ---------- Buttons (touch-friendly) ---------- */
.btn {
    border-radius: var(--idt-radius-sm);
    font-weight: 500;
    padding: .55rem 1.05rem;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .8rem 1.4rem; }
.btn-primary {
    background: var(--idt-primary);
    border-color: var(--idt-primary);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--idt-primary-dark);
    border-color: var(--idt-primary-dark);
    box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
}
.btn-outline-primary { color: var(--idt-primary); border-color: var(--idt-primary); }
.btn-outline-primary:hover { background: var(--idt-primary); border-color: var(--idt-primary); }

/* ---------- Cards ---------- */
.card {
    border: 1px solid #eef1f6;
    border-radius: var(--idt-radius);
    box-shadow: var(--idt-shadow);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card.hoverable:hover { box-shadow: var(--idt-shadow-hover); transform: translateY(-3px); }
.card .card-header { background: transparent; border-bottom: 1px solid #eef1f6; font-weight: 600; }

/* Colored dashboard stat cards: keep them flat + vibrant */
.card.bg-primary { background: var(--idt-primary) !important; }
.card.bg-success { background: #059669 !important; }

/* ---------- Forms (comfortable, touch-sized) ---------- */
.form-control, .form-select {
    border-radius: var(--idt-radius-sm);
    border-color: #e2e8f0;
    padding: .6rem .85rem;
    min-height: 44px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--idt-primary);
    box-shadow: 0 0 0 .2rem var(--idt-primary-soft);
}
.form-label { font-weight: 500; color: var(--idt-ink); }
.input-group-text { border-radius: var(--idt-radius-sm); background: #f8fafc; border-color: #e2e8f0; }
/* Bootstrap 4 .form-group has no margin in BS5 — restore it for legacy forms */
.form-group { margin-bottom: 1rem; }

/* ---------- Tables ---------- */
.table { --bs-table-hover-bg: #f1f5ff; }
.table > thead th {
    background: #f8fafc;
    color: var(--idt-muted);
    text-transform: uppercase;
    font-size: .76rem;
    letter-spacing: .04em;
    border-bottom: 1px solid #e8edf5;
}
.table-responsive { border-radius: var(--idt-radius); }

/* ---------- Badges & alerts ---------- */
.badge { font-weight: 500; border-radius: 8px; padding: .4em .7em; }
.alert { border: 0; border-radius: var(--idt-radius); box-shadow: var(--idt-shadow); }

/* ---------- Page rhythm ---------- */
.container, .container-fluid { padding-top: .5rem; }
.page-title { font-weight: 700; display: flex; align-items: center; gap: .5rem; margin: .25rem 0 1rem; }

/* ---------- Floating Messenger button ---------- */
.messenger-button { border-radius: 999px !important; box-shadow: 0 10px 24px rgba(0, 132, 255, .35); }

/* ---------- Tablet & small-screen tuning ---------- */
@media (max-width: 992px) {
    .btn { padding: .6rem 1.1rem; }            /* easier to tap */
    .card .card-body { padding: 1rem; }
    h1 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    .container, .container-fluid { padding-left: .9rem; padding-right: .9rem; }
    .table > thead th { font-size: .72rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}