* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", Arial, sans-serif;
background: #f5f7fb;
}
/* =========================
LOGIN
========================= */
.login-page {
min-height: 100vh;
background:
linear-gradient(
135deg,
#0d6efd,
#6610f2
);
}
.login-card {
background: #ffffff;
padding: 40px;
border-radius: 22px;
box-shadow:
0 20px 60px
rgba(0, 0, 0, 0.20);
}
.library-logo {
width: 80px;
height: 80px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #0d6efd;
color: white;
font-size: 38px;
}
/* =========================
MAIN LAYOUT
========================= */
.container-fluid > .row {
margin-left: 0;
margin-right: 0;
align-items: stretch;
}
/* =========================
SIDEBAR COLUMN
========================= */
.col-lg-2.sidebar {
padding-left: 0;
padding-right: 0;
background: #212529;
min-height: calc(100vh - 56px);
}
/* =========================
SIDEBAR MENU
========================= */
.sidebar-menu {
width: 100%;
min-height: calc(100vh - 56px);
background: #212529;
padding: 20px 12px;
}
/* =========================
SIDEBAR TITLE
========================= */
.sidebar-title {
color: #999;
font-size: 12px;
font-weight: bold;
margin: 10px 12px 15px;
}
/* =========================
MENU HEADING
========================= */
.menu-heading {
color: #777;
font-size: 11px;
font-weight: 700;
margin: 15px 12px 10px;
letter-spacing: 0.5px;
}
/* =========================
MENU LINKS
========================= */
.sidebar-menu a {
display: block;
width: 100%;
color: #ddd;
text-decoration: none;
padding: 13px 15px;
margin-bottom: 5px;
border-radius: 8px;
transition:
background 0.2s ease,
color 0.2s ease;
}
/* =========================
HOVER
========================= */
.sidebar-menu a:hover {
background: #0d6efd;
color: #ffffff;
}
/* =========================
ACTIVE MENU
CURRENT PAGE = WHITE
========================= */
.sidebar-menu a.active {
background: #ffffff;
color: #212529;
font-weight: 600;
}
/* =========================
ACTIVE ICON
========================= */
.sidebar-menu a.active i {
color: #212529;
}
/* =========================
ACTIVE HOVER
========================= */
.sidebar-menu a.active:hover {
background: #ffffff;
color: #212529;
}
/* =========================
ICON
========================= */
.sidebar-menu a i {
width: 25px;
display: inline-block;
}
/* =========================
SIDEBAR HR
========================= */
.sidebar-menu hr {
border-color: #555;
margin:
15px 5px;
}
/* =========================
LOGOUT
========================= */
.sidebar-menu .logout-link {
color: #ddd;
}
.sidebar-menu .logout-link:hover {
background: #dc3545;
color: #ffffff;
}
/* =========================
MAIN CONTENT
========================= */
.main-content {
padding: 30px;
min-width: 0;
width: 100%;
overflow-x: auto;
}
/* =========================
AUTHORS CONTENT
========================= */
.authors-content {
padding: 30px;
min-width: 0;
flex: 1 1 auto;
width: 100%;
overflow-x: auto;
}
/* =========================
STUDENTS CONTENT
========================= */
.students-content {
min-width: 0;
padding: 30px;
width: 100%;
overflow-x: auto;
}
/* =========================
TABLE
========================= */
.table-responsive {
width: 100%;
overflow-x: auto;
}
/* =========================
CARDS
========================= */
.card {
max-width: 100%;
}
/* =========================
STAT CARDS
========================= */
.stat-card {
background: white;
padding: 22px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 18px;
box-shadow:
0 5px 20px
rgba(0, 0, 0, 0.06);
}
.stat-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #e7f1ff;
color: #0d6efd;
font-size: 27px;
flex-shrink: 0;
}
.stat-card p {
margin: 0;
color: #777;
}
.stat-card h2 {
margin: 3px 0 0;
font-weight: 700;
}
/* =========================
ACTION CARDS
========================= */
.action-card {
background: white;
padding: 25px;
border-radius: 15px;
text-decoration: none;
color: #212529;
display: flex;
flex-direction: column;
gap: 5px;
box-shadow:
0 5px 20px
rgba(0, 0, 0, 0.06);
transition: 0.25s;
}
.action-card:hover {
transform: translateY(-5px);
color: #0d6efd;
}
.action-card i {
font-size: 30px;
margin-bottom: 5px;
}
.action-card small {
color: #777;
}
/* =========================
MOBILE / TABLET
========================= */
@media (max-width: 991px) {
.col-lg-2.sidebar {
min-height: auto;
width: 100%;
}
.sidebar-menu {
min-height: auto;
padding: 15px 10px;
}
.sidebar-menu a {
display: inline-block;
width: auto;
margin-right: 4px;
padding: 10px 12px;
}
.main-content {
width: 100%;
padding: 20px;
}
.authors-content {
width: 100%;
padding: 20px;
}
.students-content {
width: 100%;
padding: 20px;
}
}
/* ====================================================
PERFECT COMPACT HORIZONTAL MENU - NAMES RESTORED
==================================================== */
@media (max-width: 991px) {
/* 1. मुख्य साइडबार कंटेनर को मोबाइल पर पतला और फिट बनाएं */
.col-lg-2.sidebar,
.sidebar {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
background: #1e2225 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
/* 2. मेनू कंटेनर की पैडिंग और एलाइनमेंट */
.sidebar-menu,
.sidebar nav,
.sidebar ul,
.sidebar div {
display: flex !important;
flex-direction: row !important;
white-space: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 12px !important;
padding: 6px 12px !important;
margin: 0 !important;
list-style: none !important;
-webkit-overflow-scrolling: touch;
}
/* 3. हर एक कैप्सूल बटन का साइज़ और उसकी बाहरी मार्जिन सेट करें */
.sidebar a,
.sidebar-menu a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #2b3035 !important;
color: #f8f9fa !important;
flex: 1 0 auto !important;
padding: 10px 18px !important;
margin: 0 !important;
border-radius: 30px !important;
font-size: 13px !important;
text-decoration: none !important;
border: 1px solid #343a40 !important;
transition: all 0.2s ease;
min-height: 40px !important;
}
/* बटन पर टच/होवर इफेक्ट */
.sidebar a:hover, .sidebar-menu a:hover {
background: #0d6efd !important;
color: #ffffff !important;
}
/* एक्टिव बटन का डिज़ाइन */
.sidebar a.active, .sidebar-menu a.active {
background: #ffffff !important;
color: #212529 !important;
font-weight: 600 !important;
border-color: #ffffff !important;
}
/* बटन के अंदर मौजूद आइकॉन */
.sidebar a i, .sidebar-menu a i {
font-size: 15px !important;
margin-right: 6px !important;
margin-bottom: 0 !important;
width: auto !important;
display: inline-block !important;
}
/* 4. सुधार: सिर्फ पुरानी हेडिंग और लाइनों को छुपाएं, बटनों के अंदर के किसी भी टैग को नहीं छुएंगे */
.sidebar-title,
.menu-heading,
.sidebar hr,
.sidebar br,
.sidebar-menu hr {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
width: 0 !important;
height: 0 !important;
}
/* लॉगआउट बटन की सेटिंग */
.sidebar a[href*="logout"], .sidebar-menu a[href*="logout"] {
background: rgba(220, 53, 69, 0.15) !important;
border: 1px solid rgba(220, 53, 69, 0.4) !important;
color: #ea868f !important;
flex: 1 0 auto !important;
}
/* स्क्रॉल बार को छुपाकर रखना */
.sidebar-menu::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
display: none !important;
}
}
/* =========================
SMALL MOBILE
========================= */
@media (max-width: 576px) {
.login-card {
padding: 25px 20px;
}
.main-content {
padding: 15px;
}
.authors-content {
padding: 15px;
}
.students-content {
padding: 15px;
}
.stat-card {
padding: 18px;
}
}