/* /theme/menu/menu.css */
/*────────────────────────────────────────────────
  THEME VARIABLES (night = default, day = .light-theme)
──────────────────────────────────────────────*/

/* ── DARK THEME (default) ── */
:root {
  --bg-gradient: radial-gradient(circle, #0f111a, #1e1e2f, #2c2c3f, #3a4050);
  --text-color:        #e3e5ea;    /* off-white */
  --sidebar-bg:        rgba(15, 17, 26, 0.5);
  --sidebar-border:    rgba(255, 255, 255, 0.1);
  --link-color:        #e3e5ea;
  --link-bg:           rgba(15, 17, 26, 0.2);
  
  --btn-border-color: rgba(62, 160, 255, 0.5);      /* keep the 50% sky-blue */
  --btn-box-shadow:    0 2px 6px rgba(62, 160, 255, 0.2);  /* slimmer, subtler glow */

  /* Active & hover using your sky-blue ↔ indigo accents */
  --active-bg:         #3ea0ff;    /* sky-blue */
  --active-color:      #0f111a;    /* dark text on bright bg */
  --hover-bg:          #5c6ac4;    /* indigo */
  --hover-color:       #e3e5ea;
  
  --panel-bg:          rgba(15, 17, 26, 0.5);
  --card-bg:           rgba(15, 17, 26, 0.35);

  /* Logo */
  --logo-color:        #3ea0ff;
  --logo-span-color:   #5c6ac4;

  /* Credits & support */
  --credit-text:       #afb4c0;    /* muted gray-blue */
  --support-text:      #e3e5ea;
  --support-button-bg: #3ea0ff;
  --support-button-hover-bg: #5c6ac4;

  /* Charge button */
  --charge-button-bg:         #3ea0ff;
  --charge-button-hover-bg:   #5c6ac4;
}

/* ─ LIGHT THEME OVERRIDES ─ */
body.light-theme {
  --bg-gradient: radial-gradient(circle, #f9fafb, #f2f4f7, #eaecef, #e3e5ea);
  --text-color:        #111827;    /* rich dark gray */
  --sidebar-bg:        #ffffff;
  --sidebar-border:    rgba(0, 0, 0, 0.1);
  --link-color:        #111827;
  --link-bg:           #f5f5f5;

  --btn-border-color: rgba(59, 130, 246, 0.6);      /* blue-500 at 60% opacity */
  --btn-box-shadow:    0 4px 12px rgba(59, 130, 246, 0.2);

  /* Blue accents for interactions */
  --active-bg:         #3b82f6;    /* blue-500 */
  --active-color:      #ffffff;
  --hover-bg:          #2563eb;    /* indigo-600 */
  --hover-color:       #ffffff;

  --panel-bg:          #fafafa;
  --card-bg:           #ffffff;

  /* Logo */
  --logo-color:        #3b82f6;
  --logo-span-color:   #2563eb;

  /* Credits & support */
  --credit-text:       #6b7280;
  --support-text:      #6b7280;
  --support-button-bg: #3b82f6;
  --support-button-hover-bg: #2563eb;

  /* Charge button */
  --charge-button-bg:       #3b82f6;
  --charge-button-hover-bg: #2563eb;
}

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg-gradient);
  color: var(--text-color);
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dashboard Container */
.dashboard {
  display: flex;
  width: 99%;
  height: 97%;
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
}

/* Sidebar Styling */
.sidebar {
  width: 22.5%;
  z-index: 20000;
  background: var(--sidebar-bg);
  padding: 20px;
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  border-radius: 15px 0 0 15px;
  transition: all 0.3s ease;
  position: relative;
}
.sidebar nav ul {
  list-style: none;
  margin-bottom: 30px;
}
.sidebar nav ul li {
  margin-bottom: 15px;
}
.sidebar nav ul li a {
  text-decoration: none;
  color: var(--link-color);
  font-size: 1.1rem;
  display: block;
  padding: 10px 15px;
  border-radius: 8px;
  background: var(--link-bg);
  transition: all 0.2s ease;
    border: 1px solid var(--btn-border-color);
  box-shadow: var(--btn-box-shadow);

}
.sidebar nav ul li a:hover {
  background: var(--hover-bg);
  color: var(--hover-color);
  border-color: var(--hover-bg);
  box-shadow: 0 3px 8px rgba(62, 160, 255, 0.25);

}
.sidebar nav ul li.active a {
  background: var(--active-bg);
  color: var(--active-color);
}

/* Panel Icons Styling */
.panel-icons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
  padding: 10px;
  background: var(--panel-bg);
  border-radius: 8px;
  width: 100%;
}
.panel-icon {
  position: relative;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--link-color);
}
.panel-icon:hover {
  color: var(--hover-bg);
}
/* Badge styling as red dot */
.badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: none;
  background: red;
  border-radius: 50%;
  width: 10px;
  height: 10px;
}
.badge.active {
  display: block;
}

/* Global Dropdown Panel */
.dropdown-panel {
  position: absolute;
  top: 150px;
  left: 20px;
  width: calc(100% - 40px);
  background: var(--bg-gradient);
  border: 1px solid var(--sidebar-border);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  display: none;
  z-index: 9999;
}
.dropdown-panel ul {
  list-style: none;
  margin: 0;
  padding: 10px;
}
.dropdown-panel li {
  padding: 8px 10px;
  border-bottom: 1px solid var(--sidebar-border);
  font-size: 0.9rem;
}
.dropdown-panel li:last-child {
  border-bottom: none;
}
.dropdown-panel li a {
  text-decoration: none;
  color: var(--link-color);
  display: block;
}
.dropdown-panel li a:hover {
  color: var(--hover-bg);
}
.dropdown-panel .see-more {
  text-align: center;
  padding: 10px;
  border-top: 1px solid var(--sidebar-border);
}
.dropdown-panel .see-more a {
  color: var(--hover-bg);
  text-decoration: none;
  font-weight: bold;
}
.dropdown-panel .see-more a:hover {
  text-decoration: underline;
}

/* Off-Canvas Credit Bar and Icons */
.offcanvas-icons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 20px 0;
}
.offcanvas-icons .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.3rem;
  color: var(--link-color);
  cursor: pointer;
}
.offcanvas-icons .icon:hover {
  color: var(--hover-bg);
}
.offcanvas-icons .icon span {
  font-size: 0.9rem;
  margin-top: 5px;
}
.offcanvas-credits {
  margin: auto;
  background: var(--card-bg);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  color: var(--credit-text);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  font-size: 1.1rem;
}
.offcanvas-credits .enhance-button {
  display: block;
  margin: 15px auto;
  padding: 10px 20px;
  font-size: 1.1rem;
  color: var(--active-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--charge-button-bg);
  transition: background 0.2s ease;
}
.offcanvas-credits .enhance-button:hover {
  background: var(--charge-button-hover-bg);
}
.support-section {
  margin: auto;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  background: var(--card-bg);
  color: var(--support-text);
  font-size: 1.1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.support-section button {
  display: block;
  margin: 15px auto;
  padding: 10px 20px;
  font-size: 1.1rem;
  color: var(--active-color);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: var(--support-button-bg);
  transition: background 0.2s ease;
}
.support-section button:hover {
  background: var(--support-button-hover-bg);
}

/* Logo and Support Section */
.logo {
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--logo-color);
  margin-bottom: 20px;
}
.logo span {
  font-size: 1.0rem;
  color: var(--logo-span-color);
}

/* Theme Toggle Button (above logo, top right) */
.theme-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
}
.theme-toggle button {
  background: transparent;
  border: none;
  color: var(--link-color);
  font-size: 1.2rem;
  cursor: pointer;
  outline: none;
}

/* Content Area */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  border-radius: 10px;
}

/* Submenu */
.submenu {
  display: none;
  list-style: none;
  padding-left: 20px;
  margin-top: 10px;
}

/* Header Styling */
.header {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-gradient);
  padding: 15px 5px 0px 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
}
.header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--logo-color);
  text-decoration: none;
}
.header .logo span {
  font-size: 0.9rem;
  color: var(--logo-span-color);
}
.header .menu-button {
  background: transparent;
  color: var(--link-color);
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.header .menu-button i {
  margin-right: 5px;
}

/* Language Selector Styles */
.language-selector {
  margin-bottom: 15px;
  text-align: left;
}

.language-selector select {
  background: var(--link-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: 4px;
  padding: 5px 10px;
  color: var(--link-color);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.language-selector select:hover {
  background: var(--hover-bg);
}

.language-selector select:focus {
  border-color: var(--active-bg);
}
@media (max-width: 768px) {
  .header {
    display: flex;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 70%;
    height: 100%;
    background: var(--bg-gradient);
    z-index: 3000;
    transition: left 0.3s ease;
    padding: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
  }
  .sidebar.open {
    left: 0;
  }
  .menu-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2000;
    padding: 12px 18px;
  }
  .dashboard {
    display: flex;
    border-radius: 0;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }
  .content-area {
    overflow-y: auto;
    flex: 1;
  }
  body {
    height: 100vh;
    overflow: hidden;
  }
}
.offcanvas-icons .icon,
.offcanvas-icons .icon:hover {
  text-decoration: none;
}

/* ─────────────────────────────────
   Notification‐Card Styling
─────────────────────────────────*/

/* Container for all cards */
.notification-list {
  max-height: 300px;          /* adjust as needed */
  overflow-y: auto;           /* scroll if too many items */
  padding: 10px;
}

/* Each notification card */
.notification-card {
  display: flex;
  align-items: center;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.notification-card:last-child {
  margin-bottom: 0;
}

/* Icon on the left (calendar, bell, etc.) */
.notification-card .notif-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--hover-bg);       /* accent circle behind icon */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.notification-card .notif-icon i {
  color: var(--active-color);
  font-size: 1rem;
}

/* Main text container */
.notification-card .notif-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* “You have a new invited test” + bolded ID */
.notification-card .notif-content .notif-text {
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-color);
  margin-bottom: 4px;
}

/* Bold the Test ID */
.notification-card .notif-content .notif-text .notif-id {
  font-weight: 600;
  color: var(--hover-bg);
}

/* Timestamp below (optional) */
.notification-card .notif-content .notif-time {
  font-size: 0.75rem;
  color: var(--credit-text);
}

/* Hover effect for entire card */
.notification-card:hover {
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.notification-card:hover .notif-content .notif-text,
.notification-card:hover .notif-content .notif-time {
  color: var(--active-color);
}

/* In light theme, use dark text color on white background */
body.light-theme .notification-card:hover .notif-content .notif-text,
body.light-theme .notification-card:hover .notif-content .notif-time {
  color: var(--text-color); /* dark text */
}

/* “See All” link styling */
.dropdown-panel .see-more {
  text-align: center;
  padding: 8px 0;
  border-top: 1px solid var(--sidebar-border);
  background: var(--card-bg);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.dropdown-panel .see-more a {
  color: var(--hover-bg);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.dropdown-panel .see-more a:hover {
  color: var(--active-bg);
  text-decoration: underline;
}