/* ===== HINDI/SANSKRIT THEME COLORS — The Hindi Content / Sanskrit aur Sanskriti ===== */
:root {
    /* === Logo-matched palette (SNS brand: dark brown bg · gold rays · coral lotus) === */
    --primary-saffron:  #E8762A;   /* coral (lotus)          */
    --primary-maroon:   #2C1E00;   /* dark golden-brown bg   */
    --primary-gold:     #D4A830;   /* gold rays              */
    --dark-maroon:      #1A1000;   /* deeper dark            */
    --light-saffron:    #FFF6E8;   /* warm cream tint        */
    --cream:            #FFF9EE;   /* page background        */
    --text-dark:        #2C1A00;   /* body text              */
    --border-color:     #E8D09A;   /* warm gold border       */
    /* Extended */
    --gold-light:       #F0C040;
    --rose:             #CC3366;
    --mid-brown:        #4A3200;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans Devanagari', sans-serif;
    background-color: var(--cream);
    color: var(--text-dark);
    line-height: 1.7;
}

/* ===== NAVBAR ===== */
.navbar-main {
    background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%);
    padding: 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-main .navbar-brand {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-gold) !important;
    padding: 12px 25px;
}

.navbar-main .navbar-brand i {
    color: var(--primary-saffron);
    margin-right: 8px;
}

.navbar-main .navbar-toggler {
    border-color: var(--primary-gold);
    margin-right: 15px;
}

.navbar-main .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(212, 168, 48, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-main .nav-link {
    color: rgba(255,255,255,0.9) !important;
    padding: 18px 18px !important;
    font-weight: 500;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.navbar-main .nav-link:hover {
    color: var(--primary-gold) !important;
    background: rgba(255,255,255,0.08);
    border-bottom-color: var(--primary-saffron);
}

.navbar-main .nav-link.active {
    color: var(--primary-gold) !important;
    border-bottom-color: var(--primary-gold);
}

.navbar-main .nav-link i {
    margin-right: 5px;
}

.navbar-main .btn-login {
    background: linear-gradient(135deg, var(--primary-saffron) 0%, var(--primary-gold) 100%);
    color: var(--dark-maroon) !important;
    border: none;
    font-weight: 600;
    margin: 8px 15px;
    padding: 10px 25px !important;
    border-radius: 25px;
    border-bottom: none !important;
}

.navbar-main .btn-login:hover {
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-saffron) 100%);
    transform: translateY(-2px);
}

/* ===== MAIN LAYOUT ===== */
.main-wrapper {
    display: flex;
    min-height: calc(100vh - 60px);
}

/* ===== SIDEBAR ===== */
.sidebar-nav {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    background: linear-gradient(180deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%);
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    box-shadow: 2px 0 15px rgba(0,0,0,0.2);
}

.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--primary-gold); border-radius: 3px; }

.sidebar-header {
    background: rgba(0,0,0,0.3);
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(212,168,48,0.2);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-header h5, .sidebar-header h6 { color: var(--primary-gold); margin: 0; font-weight: 700; }
.sidebar-header small { color: rgba(255,255,255,0.6); font-size: 0.8rem; }

.sidebar-footer { border-top: 1px solid rgba(212,168,48,0.15); margin-top: 20px; }

.category-list { list-style: none; padding: 0; margin: 0; }
.category-item { border-bottom: 1px solid rgba(255,255,255,0.05); }

.category-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    cursor: pointer;
}

.category-link:hover {
    background: rgba(212,168,48,0.15);
    color: var(--primary-gold);
    padding-left: 25px;
}

.category-link.active {
    background: linear-gradient(90deg, rgba(232,118,42,0.35) 0%, transparent 100%);
    color: var(--primary-gold);
    border-left: 3px solid var(--primary-gold);
    font-weight: 600;
}

.category-link i.toggle-icon { font-size: 0.75rem; transition: transform 0.3s; }

.subcategory-list {
    list-style: none; padding: 0; margin: 0;
    background: rgba(0,0,0,0.25);
    display: none;
    border-left: 3px solid var(--primary-saffron);
}
.subcategory-list.show { display: block; }

.subcategory-link {
    display: block;
    padding: 12px 20px 12px 35px;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 0.92rem;
    transition: all 0.3s;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.subcategory-link:hover { background: rgba(255,255,255,0.07); color: var(--primary-saffron); padding-left: 40px; }
.subcategory-link.active { color: var(--primary-gold); background: rgba(255,255,255,0.08); }

.sub-subcategory-list { list-style: none; padding: 0; margin: 0; background: rgba(0,0,0,0.2); display: none; }
.sub-subcategory-list.show { display: block; }
.sub-subcategory-link { display: block; padding: 10px 20px 10px 55px; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.88rem; transition: all 0.3s; }
.sub-subcategory-link:hover { color: var(--primary-saffron); background: rgba(255,255,255,0.05); }
.sub-subcategory-link.active { color: var(--primary-gold); }

/* ===== MAIN CONTENT ===== */
.main-content { flex: 1; padding: 30px 40px; background: var(--cream); min-width: 0; }

/* ===== PAGE HEADER ===== */
.page-header {
    background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%);
    color: white; padding: 30px 35px; border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(44,30,0,0.35);
    position: relative; overflow: hidden;
}
.page-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 5px; }
.page-header .subtitle { color: var(--primary-gold); font-size: 1.1rem; }

/* ===== BREADCRUMB ===== */
.breadcrumb-wrapper {
    background: white; padding: 12px 20px; border-radius: 8px;
    margin-bottom: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-left: 4px solid var(--primary-saffron);
}
.breadcrumb { margin: 0; background: none; padding: 0; }
.breadcrumb-item a { color: var(--primary-maroon); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--primary-saffron); }
.breadcrumb-item.active { color: var(--text-dark); font-weight: 500; }

/* ===== CARDS ===== */
.content-card {
    background: white; border: none; border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08); transition: all 0.3s; overflow: hidden; height: 100%;
}
.content-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(44,30,0,0.18); }
.content-card .card-header {
    background: linear-gradient(135deg, var(--light-saffron) 0%, white 100%);
    border-bottom: 2px solid var(--primary-saffron); padding: 15px 20px;
}
.content-card .card-body { padding: 20px; }
.content-card .card-title { color: var(--primary-maroon); font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; }
.content-card .card-text { color: #666; font-size: 0.95rem; }

.category-card {
    background: white; border-radius: 12px; padding: 25px; text-align: center;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08); transition: all 0.3s;
    border: 2px solid transparent; height: 100%;
}
.category-card:hover { border-color: var(--primary-gold); transform: translateY(-5px); box-shadow: 0 8px 25px rgba(212,168,48,0.2); }
.category-card .icon-box {
    width: 70px; height: 70px;
    background: linear-gradient(135deg, var(--primary-saffron) 0%, var(--primary-gold) 100%);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
}
.category-card .icon-box i { font-size: 1.8rem; color: white; }
.category-card h5 { color: var(--primary-maroon); font-weight: 600; margin-bottom: 8px; }
.category-card p { color: #888; font-size: 0.9rem; margin-bottom: 15px; }

/* ===== BUTTONS ===== */
.btn-primary-theme {
    background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%);
    border: none; color: white; padding: 10px 25px; border-radius: 25px; font-weight: 500; transition: all 0.3s;
}
.btn-primary-theme:hover { background: linear-gradient(135deg, var(--dark-maroon) 0%, var(--primary-maroon) 100%); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(44,30,0,0.3); }

.btn-saffron {
    background: linear-gradient(135deg, var(--primary-saffron) 0%, var(--primary-gold) 100%);
    border: none; color: var(--dark-maroon); padding: 10px 25px; border-radius: 25px; font-weight: 600; transition: all 0.3s;
}
.btn-saffron:hover { background: linear-gradient(135deg, var(--primary-gold) 0%, var(--primary-saffron) 100%); color: var(--dark-maroon); transform: translateY(-2px); }

.btn-outline-theme {
    border: 2px solid var(--primary-maroon); color: var(--primary-maroon); background: transparent;
    padding: 8px 22px; border-radius: 25px; font-weight: 500; transition: all 0.3s;
}
.btn-outline-theme:hover { background: var(--primary-maroon); color: white; }

/* ===== BADGES ===== */
.badge-premium { background: linear-gradient(135deg, var(--primary-gold) 0%, #B8962E 100%); color: var(--dark-maroon); padding: 5px 12px; border-radius: 15px; font-weight: 600; font-size: 0.8rem; }
.badge-category { background: var(--primary-maroon); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; }
.badge-saffron { background: var(--primary-saffron); color: var(--dark-maroon); padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; }

/* ===== CONTENT VIEW ===== */
.content-view-wrapper { background: white; border-radius: 15px; box-shadow: 0 5px 25px rgba(0,0,0,0.08); overflow: hidden; }
.content-header { background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%); color: white; padding: 30px 35px; }
.content-header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 5px; }
.content-header h2 { color: var(--primary-gold); font-size: 1.3rem; font-weight: 400; }
.content-body { padding: 35px; font-size: 1.1rem; line-height: 2; }
.content-body h1, .content-body h2, .content-body h3 { color: var(--primary-maroon); margin-top: 1.5em; margin-bottom: 0.5em; border-bottom: 2px solid var(--light-saffron); padding-bottom: 10px; }
.meta-info { background: var(--light-saffron); padding: 15px 25px; border-radius: 10px; border-left: 4px solid var(--primary-saffron); margin: 20px 0; }

/* ===== PREMIUM LOCK ===== */
.premium-box { background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 100%); color: white; padding: 50px; border-radius: 15px; text-align: center; box-shadow: 0 10px 40px rgba(44,30,0,0.35); }
.premium-box h3 { color: var(--primary-gold); margin: 20px 0; }

/* ===== FOOTER ===== */
.footer-main { background: linear-gradient(135deg, var(--dark-maroon) 0%, var(--primary-maroon) 100%); color: rgba(255,255,255,0.9); padding: 50px 40px 30px; margin-top: auto; }
.footer-main h5 { color: var(--primary-gold); font-weight: 600; margin-bottom: 20px; }
.footer-main h5 i { color: var(--primary-saffron); margin-right: 10px; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: rgba(255,255,255,0.8); text-decoration: none; transition: all 0.3s; }
.footer-links a:hover { color: var(--primary-gold); padding-left: 5px; }
.footer-links i { color: var(--primary-saffron); margin-right: 8px; width: 20px; }
.footer-main hr { border-color: rgba(212,168,48,0.2); margin: 30px 0 20px; }

/* ===== LOGIN ===== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-maroon) 0%, var(--dark-maroon) 50%, #0A0800 100%); position: relative; overflow: hidden; }
.login-card { background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); padding: 50px; width: 100%; max-width: 450px; position: relative; z-index: 1; }
.login-card .logo { text-align: center; margin-bottom: 30px; }
.login-card .logo i { font-size: 4rem; color: var(--primary-saffron); }
.login-card .logo h2 { color: var(--primary-maroon); font-weight: 700; margin-top: 15px; }
.login-card .logo p { color: #888; font-size: 0.95rem; }

/* ===== FORMS ===== */
.form-control, .form-select { border: 2px solid var(--border-color); border-radius: 8px; padding: 12px 15px; transition: all 0.3s; }
.form-control:focus, .form-select:focus { border-color: var(--primary-gold); box-shadow: 0 0 0 3px rgba(212,168,48,0.18); }
.form-label { font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.input-group-text { background: var(--light-saffron); border: 2px solid var(--border-color); border-right: none; color: var(--primary-maroon); }

/* ===== PAGINATION ===== */
.pagination .page-link { color: var(--primary-maroon); border-color: var(--border-color); padding: 10px 15px; }
.pagination .page-link:hover { background: var(--light-saffron); border-color: var(--primary-gold); }
.pagination .page-item.active .page-link { background: var(--primary-maroon); border-color: var(--primary-maroon); }

/* ===== UTILITY ===== */
.text-saffron  { color: var(--primary-saffron) !important; }
.text-maroon   { color: var(--primary-maroon)  !important; }
.text-gold     { color: var(--primary-gold)     !important; }
.bg-light-saffron { background-color: var(--light-saffron) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .sidebar-nav { display: none; }
    .main-content { padding: 20px; }
}
@media (max-width: 768px) {
    .navbar-main .navbar-brand { font-size: 1.2rem; }
    .page-header h1 { font-size: 1.5rem; }
    .content-body { padding: 20px; font-size: 1rem; }
}