@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght=0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

        /* Global Resets & Variables */
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        :root {
          --primary-color: #0e2431;    /* Deep Scholarly Slate */
          --accent-color: #007BFF;     /* Clean Metric Blue */
          --bg-overlay: rgba(248, 250, 252, 0.92); 
          --card-bg: rgba(255, 255, 255, 0.96);    
          --border-subtle: #e2e8f0;    
          --success-color: #10b981;    /* Open Access Green */
        }

        body {
          font-family: "Poppins", sans-serif;
          color: #1e293b;
          background-image: url('https://eurl-knowking.dz/DL/Logo2026.png');
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
          background-attachment: fixed;
          min-height: 100vh;
          line-height: 1.6;
          display: flex;
          flex-direction: column;
        }

        /* Layout Core */
        .container {
          max-width: 1140px;
          width: 90%;
          margin: auto;
          padding: 1rem 0;
        }


        /* Navbar Layout styling */
        .navbar {
          width: 100%;
          background-color: rgba(255, 255, 255, 0.95);
          backdrop-filter: blur(8px);
          box-shadow: 0 4px 20px rgba(146, 161, 176, 0.1);
          position: sticky;
          top: 0;
          z-index: 1000;
          border-bottom: 1px solid var(--border-subtle);
        }

        .nav-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 70px;
          max-width: 1140px;
          width: 90%;
          margin: auto;
        }

        .navbar .menu-items {
          display: flex;
          align-items: center;
          gap: 1.5rem;
        }

        .navbar .nav-container li {
          list-style: none;
        }

        .navbar .nav-container a {
          text-decoration: none;
          color: var(--primary-color);
          font-weight: 500;
          font-size: 1rem;
          padding: 0.5rem 1rem;
          border-radius: 6px;
          transition: all 0.2s ease-in-out;
        }

        .navbar .nav-container a:hover {
          color: var(--accent-color);
          background-color: rgba(0, 123, 255, 0.05);
        }

        .logo {
          font-size: 1.4rem;
          font-weight: 700;
          color: var(--primary-color);
          letter-spacing: -0.5px;
        }

        /* Search Bar Component Block */
        .search-container {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 30px auto;
          width: 100%;
          max-width: 650px;
          box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
          border-radius: 30px;
          background: #fff;
          padding: 4px;
        }

        .search-bar {
          width: 100%;
          padding: 14px 24px;
          font-size: 16px;
          border: none;
          background: transparent;
          outline: none;
          color: #334155;
        }

        .search-bar::placeholder {
          color: #94a3b8;
        }

        .search-button {
          padding: 14px 28px;
          font-size: 15px;
          font-weight: 600;
          color: #fff;
          background-color: var(--accent-color);
          border: none;
          border-radius: 26px;
          cursor: pointer;
          transition: background-color 0.2s ease;
        }

        .search-button:hover {
          background-color: #0056b3;
        }

        /* 3-Column Layout Frame Architecture */
        .wrapper {
          max-width: 90rem;
          width: 95%;
          margin: 0 auto;
          padding: min(2rem, 5vw);
          display: grid;
          grid-template-columns: 260px 1fr 220px; /* Sidebar | Main Grid Grid Column | Adsbar */
          gap: 2rem;
          align-items: start;
          flex: 1;
        }

        /* Left Filtering Sidebar Container */
        .sidebar {
          background-color: var(--card-bg);
          border: 1px solid var(--border-subtle);
          border-radius: 12px;
          padding: 1.5rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
          position: sticky;
          top: 90px;
        }

        .sidebar h3 {
          font-size: 1.1rem;
          color: var(--primary-color);
          margin-bottom: 1.25rem;
          border-bottom: 2px solid var(--border-subtle);
          padding-bottom: 0.5rem;
        }

        .sidebar-links {
          display: flex;
          flex-direction: column;
          gap: 0.75rem;
        }

        .sidebar-links a {
          text-decoration: none;
          color: #475569;
          font-size: 0.95rem;
          padding: 0.4rem 0.75rem;
          border-radius: 6px;
          transition: all 0.2s ease;
        }

        .sidebar-links a:hover, .sidebar-links a.active {
          background-color: rgba(0, 123, 255, 0.08);
          color: var(--accent-color);
          font-weight: 500;
        }

        /* Right Sponsoring Columns (Adsbar) */
        .adsbar {
          background-color: rgba(255, 255, 255, 0.9);
          border: 1px dashed #cbd5e1;
          border-radius: 12px;
          padding: 1.25rem;
          text-align: center;
          font-size: 0.85rem;
          color: #64748b;
          position: sticky;
          top: 90px;
        }

        .ad-slot {
          background: #f8fafc;
          border: 1px solid var(--border-subtle);
          border-radius: 8px;
          min-height: 280px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 0.75rem;
          padding: 1rem;
        }

        .ad-title {
          font-weight: 600;
          color: var(--primary-color);
          margin-bottom: 0.5rem;
        }

        /* Middle Scholarly Results Grid Output Layout */
        .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
          gap: 2rem;
        }

        /* Form used elegantly as the semantic card container */
        form.document-card {
          padding: 2rem;
          background-color: var(--card-bg);
          border: 1px solid var(--border-subtle);
          border-radius: 12px;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
          transition: transform 0.25s ease, box-shadow 0.25s ease;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          text-align: left;
        }

        form.document-card:hover {
          transform: translateY(-4px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
          border-color: #cbd5e1;
        }

        legend {
          font-weight: 600;
          font-size: 1.2rem;
          color: var(--primary-color);
          line-height: 1.4;
          margin-bottom: 0.5rem;
          display: block;
        }

        .meta-author {
          font-size: 0.95rem;
          color: #475569;
          margin-bottom: 0.75rem;
          font-style: italic;
        }

        .metrics-row {
          display: flex;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin: 1rem 0;
        }

        .badge {
          font-size: 0.75rem;
          font-weight: 600;
          padding: 0.25rem 0.6rem;
          border-radius: 4px;
          text-transform: uppercase;
        }

        .badge-oa {
          background-color: #dcfce7;
          color: #15803d;
        }

        .badge-sjr {
          background-color: #e0f2fe;
          color: #0369a1;
        }

        .badge-if {
          background-color: #f3e8ff;
          color: #6b21a8;
        }

        .doi-link {
          font-size: 0.85rem;
          color: #64748b;
          word-break: break-all;
          margin-top: auto;
        }

        .download-btn {
          margin-top: 1.25rem;
          width: 100%;
          padding: 10px;
          background-color: var(--primary-color);
          color: #fff;
          border: none;
          border-radius: 6px;
          font-weight: 500;
          cursor: pointer;
          transition: background-color 0.2s;
          text-align: center;
          text-decoration: none;
          font-size: 0.95rem;
        }

        .download-btn:hover {
          background-color: var(--accent-color);
        }

        /* Alternating Zebra Cards dark styling variant mapping to target selectors */
        form.document-card:nth-child(2n) {
          color-scheme: dark;
          background-color: rgba(15, 23, 42, 0.97);
          border-color: #1e293b;
          color: #f1f5f9;
        }

        form.document-card:nth-child(2n) legend {
          color: #ffffff;
        }

        form.document-card:nth-child(2n) .meta-author {
          color: #cbd5e1;
        }

        form.document-card:nth-child(2n) .doi-link {
          color: #94a3b8;
        }

        form.document-card:nth-child(2n) .download-btn {
          background-color: var(--accent-color);
        }

        form.document-card:nth-child(2n) .download-btn:hover {
          background-color: #fff;
          color: var(--primary-color);
        }

        /* Footer bar element architecture */
        .footer-bar {
          background-color: var(--primary-color);
          color: #94a3b8;
          padding: 2.5rem 0;
          margin-top: auto;
          border-top: 4px solid var(--accent-color);
          font-size: 0.9rem;
        }

        .footer-container {
          max-width: 90rem;
          width: 95%;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 1rem;
        }

        .footer-links {
          display: flex;
          gap: 1.5rem;
        }

        .footer-links a {
          color: #cbd5e1;
          text-decoration: none;
          transition: color 0.2s ease;
        }

        .footer-links a:hover {
          color: white;
        }

        /* Responsive layout updates */
        @media (max-width: 1100px) {
          .wrapper {
              max-width: 90rem;
  width: 95%;
  margin: 0 auto;
  padding: min(2rem, 5vw);
  display: grid;
  grid-template-columns: 260px 1fr 220px; /* Sidebar | Table | Adsbar */
  gap: 2rem;
  align-items: start;
         
          }
          .adsbar {
          
            grid-column: 3;
}
       
        }

        @media (max-width: 768px) {
          .wrapper {
            grid-template-columns: 1fr;
          }
          .sidebar {
            position: relative;
            top: 0;
            margin-bottom: 1rem;
           
  grid-column: 1;

          }
          .nav-container {
            width: 100%;
            padding: 0 1rem;
          }
          .logo {
            font-size: 1.1rem;
          }
          .navbar .menu-items {
            gap: 0.75rem;
          }
          .navbar .nav-container a {
            padding: 0.4rem 0.6rem;
            font-size: 0.9rem;
          }
          .footer-container {
            flex-direction: column;
            text-align: center;
          }
        }
.library-table-container {
  width: 100%;
  
  background-color: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  overflow: hidden; /* Keeps corners rounded */
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2rem;
  grid-column: 2;
}

.library-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
  min-width: 600px;
}

/* Header Row */
.library-table th {
  background-color: rgba(15, 23, 42, 0.02);
  color: var(--primary-color);
  font-weight: 600;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid var(--border-subtle);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

/* Data Rows */
.library-table td {
  padding: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  color: #334155;
  vertical-align: middle;
}

/* Row Hover Interaction */
.library-table tr:hover td {
  background-color: rgba(0, 123, 255, 0.02);
}

/* Your original Zebra Striping mechanic mapped to standard table rows */
.library-table tr:nth-child(2n) td {
  background-color: rgba(15, 23, 42, 0.02);
}

/* Responsive wrapper to prevent table from breaking on mobile screens */
@media (max-width: 768px) {
  .library-table-container {
    overflow-x: auto; /* Adds a clean horizontal scroll on mobile devices */
  }
}

/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}