:root{
  --navy:#0d1b3d;
  --green:#16a34a;
  --green-dark:#0f7a37;
  --blue:#2563eb;
  --purple:#7c3aed;
  --bg-soft:#eef3fb;
  --bg-green-soft:#e9f7ef;
  --bg-blue-soft:#eaf1ff;
  --text-muted:#6b7280;
}
*{font-family:'Poppins',sans-serif;}
body{background:var(--bg-soft);color:#1f2937;}

/* ===== NAVBAR ===== */
.navbar-custom{background:var(--navy);padding:14px 0;}
.navbar-custom .navbar-brand{color:#fff;font-weight:700;font-size:1.2rem;display:flex;align-items:center;gap:10px;}
.navbar-custom .navbar-brand .brand-sub{display:block;font-size:.68rem;font-weight:400;color:#c9d3e6;margin-top:-2px;}
.navbar-custom .brand-highlight{color:var(--green);}
.logo-badge{width:40px;height:40px;background:var(--green);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.navbar-custom .nav-link{color:#e5e9f2 !important;font-weight:500;margin:0 10px;position:relative;}
.navbar-custom .nav-link.active{color:#fff !important;}
.navbar-custom .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--green);}
.navbar-custom .navbar-toggler{border:1px solid rgba(255,255,255,.4);padding:6px 10px;}
.navbar-custom .navbar-toggler:focus{box-shadow:0 0 0 .15rem rgba(255,255,255,.25);}
.navbar-custom .navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");}
.navbar-search{background:#1a2a52;border:none;color:#fff;border-radius:20px 0 0 20px;padding:8px 16px;min-width:200px;}
.navbar-search::placeholder{color:#a9b3cc;}
.navbar-search:focus{background:#1a2a52;color:#fff;box-shadow:none;}
.navbar-search-btn{background:var(--green);border:none;border-radius:0 20px 20px 0;color:#fff;padding:0 16px;}
.btn-contribute-nav{background:var(--green);border:none;color:#fff;border-radius:8px;padding:8px 18px;font-weight:600;white-space:nowrap;}
.btn-contribute-nav:hover{background:var(--green-dark);color:#fff;}
@media (max-width:991.98px){
  .navbar-custom .navbar-collapse{background:var(--navy);margin-top:14px;padding:16px;border-radius:10px;}
  .navbar-custom .navbar-nav{width:100%;}
  .navbar-custom .nav-item{border-bottom:1px solid rgba(255,255,255,.08);padding:8px 0;}
  .navbar-custom .nav-item:last-child{border-bottom:none;}
}

/* ===== BREADCRUMB ===== */
.breadcrumb-bar{background:#fff;border-bottom:1px solid #edf0f5;padding:14px 0;}
.breadcrumb-bar a{color:var(--blue);text-decoration:none;}
.breadcrumb-bar .sep{color:#9ca3af;margin:0 6px;}
.breadcrumb-bar .current{color:#374151;font-weight:500;}

/* ===== SIDEBAR ===== */
.sidebar-box{background:#fff;border:1px solid #edf0f5;border-radius:12px;padding:18px;margin-bottom:20px;}
.sidebar-box h6{font-weight:700;color:var(--navy);display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.sidebar-box .list-link{display:flex;justify-content:space-between;align-items:center;padding:8px 6px;border-radius:8px;color:#374151;text-decoration:none;font-size:.92rem;}
.sidebar-box .list-link:hover{background:var(--bg-soft);color:var(--navy);}
.sidebar-box .list-link .count-badge{background:var(--bg-green-soft);color:var(--green-dark);font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:12px;}
.sidebar-box .list-link.active-course{background:var(--bg-green-soft);color:var(--green-dark);font-weight:600;}
.view-all-link{color:var(--green);font-weight:600;text-decoration:none;font-size:.9rem;}
.sidebar-cta{background:var(--bg-blue-soft);border-radius:12px;padding:18px;}
.sidebar-cta h6{color:var(--navy);font-weight:700;display:flex;align-items:center;gap:8px;}
.sidebar-cta p{color:#4b5563;font-size:.88rem;margin:8px 0 14px;}

/* ===== NOTES GRID PAGE ===== */
.page-title{font-weight:700;color:var(--navy);display:flex;align-items:center;gap:10px;}
.page-title i{color:var(--green);}
.page-sub{color:var(--text-muted);}
.search-big{border-radius:8px 0 0 8px;padding:12px 16px;border:1px solid #dbe3ef;}
.search-big:focus{box-shadow:none;border-color:var(--green);}
.search-big-btn{background:var(--green);border:none;border-radius:0 8px 8px 0;padding:0 22px;color:#fff;}
.search-big-btn:hover{background:var(--green-dark);}

.filter-tabs .btn{border-radius:8px;font-weight:500;font-size:.9rem;border:1px solid #dbe3ef;background:#fff;color:#374151;}
.filter-tabs .btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}

.note-card{border:1px solid #edf0f5;border-radius:14px;background:#fff;padding:20px;height:100%;box-shadow:0 4px 14px rgba(15,23,42,.04);transition:transform .18s ease, box-shadow .18s ease;}
.note-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,42,.08);}
.note-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:12px;}
.note-card h6{font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.3;min-height:2.6em;}
.note-tags .badge-tag{font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:14px;margin-right:5px;}
.tag-type{background:var(--bg-green-soft);color:var(--green-dark);}
.tag-latest{background:var(--bg-blue-soft);color:var(--blue);}
.tag-year{background:#fdeee6;color:#c2410c;}
.note-desc{color:var(--text-muted);font-size:.86rem;margin:10px 0;min-height:3.4em;}
.note-meta{color:#9ca3af;font-size:.8rem;display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.btn-view-note{border:1px solid var(--green);color:var(--green-dark);background:#fff;border-radius:8px;padding:5px 16px;font-weight:600;font-size:.85rem;}
.btn-view-note:hover{background:var(--green);color:#fff;}

/* ===== FILTER FORM ===== */
.filter-form label{font-weight:600;font-size:.85rem;color:#374151;margin-bottom:4px;}
.filter-form select{border-radius:8px;margin-bottom:14px;}
.btn-apply-filters{background:var(--green);border:none;color:#fff;font-weight:600;border-radius:8px;padding:9px;width:100%;}
.btn-apply-filters:hover{background:var(--green-dark);color:#fff;}

/* ===== COURSE CARDS ===== */
.course-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 20px;border-radius:18px;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 10px 30px rgba(15,23,42,.08);color:#fff;width:100%;text-align:left;cursor:pointer;border:none;}
button.course-card{border:none;}
.course-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.15);}
.course-card div{display:flex;flex-direction:column;gap:6px;}
.course-code{font-size:1rem;font-weight:700;letter-spacing:.02em;}
.course-name{font-size:.93rem;color:rgba(255,255,255,.9);line-height:1.3;}
.course-badge-light{background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:.8rem;padding:6px 12px;border-radius:999px;}
.course-card-green{background:linear-gradient(135deg,#16a34a,#22c55e);}
.course-card-blue{background:linear-gradient(135deg,#2563eb,#3b82f6);}
.course-card-purple{background:linear-gradient(135deg,#7c3aed,#c084fc);}
.course-card-orange{background:linear-gradient(135deg,#f97316,#fb8c00);}
.course-card-teal{background:linear-gradient(135deg,#0d9488,#14b8a6);}
.course-card-pink{background:linear-gradient(135deg,#ec4899,#f472b6);}
.course-card-cyan{background:linear-gradient(135deg,#06b6d4,#22d3ee);}

/* ===== COURSE PAGE (single course file listing) ===== */
.course-header{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px;}
.course-icon-lg{width:64px;height:64px;background:var(--bg-green-soft);color:var(--green);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;}
.course-title{font-weight:700;color:var(--navy);font-size:1.6rem;margin-bottom:2px;}
.course-badge{background:var(--bg-green-soft);color:var(--green-dark);font-weight:600;font-size:.82rem;padding:3px 12px;border-radius:12px;}

.file-row{background:#fff;border:1px solid #edf0f5;border-radius:12px;padding:18px 20px;margin-bottom:14px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.file-icon{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;}
.file-info h6{font-weight:700;color:var(--navy);margin-bottom:3px;}
.file-info p{color:var(--text-muted);font-size:.86rem;margin-bottom:6px;}
.file-info .file-sub-meta{color:#9ca3af;font-size:.8rem;display:flex;gap:14px;flex-wrap:wrap;}
.file-side-meta{text-align:right;color:#9ca3af;font-size:.82rem;}
.file-actions{display:flex;flex-direction:column;gap:8px;min-width:130px;}
.btn-file-view{border:1px solid var(--green);color:var(--green-dark);background:#fff;border-radius:8px;padding:6px 14px;font-weight:600;font-size:.85rem;}
.btn-file-view:hover{background:var(--green);color:#fff;}
.btn-file-download{background:var(--blue);border:none;color:#fff;border-radius:8px;padding:6px 14px;font-weight:600;font-size:.85rem;}
.btn-file-download:hover{background:#1d4ed8;color:#fff;}
.year-sem-badge{background:var(--bg-blue-soft);color:var(--blue);font-weight:600;font-size:.75rem;padding:3px 10px;border-radius:10px;}

/* ===== FOOTER ===== */
.footer-custom{background:var(--navy);color:#c9d3e6;padding:50px 0 0;margin-top:50px;}
.footer-custom h6{color:#fff;font-weight:700;margin-bottom:16px;}
.footer-custom .brand-title{color:var(--green);}
.footer-custom ul{list-style:none;padding:0;}
.footer-custom ul li{margin-bottom:10px;}
.footer-custom ul li a{color:#c9d3e6;text-decoration:none;transition:color .2s;}
.footer-custom ul li a:hover{color:var(--green);}
.social-icon{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-right:10px;font-size:1rem;transition:transform .2s;}
.social-icon:hover{transform:translateY(-3px);}
.bg-fb{background:#1877f2;} .bg-tw{background:#1da1f2;}
.bg-ig{background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af);} .bg-wa{background:#25d366;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);text-align:center;padding:18px 0;margin-top:30px;font-size:.9rem;color:#9aa5c0;}

/* ===== ADMIN ===== */
.admin-card{background:#fff;border-radius:14px;border:1px solid #edf0f5;padding:28px;box-shadow:0 6px 18px rgba(15,23,42,.05);}
.admin-sidebar{background:var(--navy);min-height:100vh;padding:24px 0;}
.admin-sidebar a{color:#c9d3e6;text-decoration:none;display:flex;align-items:center;gap:10px;padding:12px 22px;font-weight:500;}
.admin-sidebar a.active,.admin-sidebar a:hover{background:rgba(255,255,255,.06);color:#fff;border-left:3px solid var(--green);}

#qaSection{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;margin-bottom:18px;}
#qaSection .qa-pair{background:var(--bg-soft);}
#qaSection .qa-pair textarea{min-height:120px;}
#qaSection .form-text{color:#475569;}


/* 1. UKUBWA WA DASHBOARD / KOMPYUTA (DESKTOP VIEW) */
.app-ad-carousel {
    max-width: 800px;
    margin: 0 auto 20px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.app-ad-carousel .carousel-item img, 
.app-ad-carousel .carousel-item video {
    height: 220px !important; /* Urefu wa kawaida kwenye kompyuta */
    object-fit: cover;
    width: 100%;
}

.app-ad-carousel .carousel-caption {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 8px 15px;
    bottom: 10px;
    left: 5%;
    right: 5%;
}

.app-ad-carousel .carousel-caption p {
    font-size: 0.85rem;
    margin-bottom: 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-ad-carousel .carousel-caption .btn {
    font-size: 0.75rem;
    padding: 3px 10px;
}


/* 2. UKUBWA WA SIMU ZA MKONONI (MOBILE VIEW - CHINI YA 768px) */
@media (max-width: 767.98px) {
    .app-ad-carousel {
        max-width: 100%; /* Inachukua upana wote wa simu */
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .app-ad-carousel .carousel-item img, 
    .app-ad-carousel .carousel-item video {
        height: 160px !important; /* Urefu unakuwa mdogo zaidi kwenye simu */
    }

    .app-ad-carousel .carousel-caption {
        padding: 5px 8px;
        bottom: 5px;
        left: 3%;
        right: 3%;
    }

    .app-ad-carousel .carousel-caption p {
        font-size: 0.75rem; /* Font inakuwa ndogo ili kutoshea */
        margin-bottom: 2px !important;
    }

    .app-ad-carousel .carousel-caption .btn {
        font-size: 0.68rem;
        padding: 2px 6px;
    }

    /* Kupunguza ukubwa wa mishale ya kushoto na kulia kwenye simu */
    .app-ad-carousel .carousel-control-prev-icon,
    .app-ad-carousel .carousel-control-next-icon {
        width: 1rem;
        height: 1rem;
    }
}