:root {
  --color-primary: #4f46e5;       /* deep tech blue */
  --color-secondary: #10b981;     /* green accent for progress/badges */
  --color-muted: #f3f4f6;         /* light gray backgrounds */
  --text-primary: #111827;        /* main text */
  --text-secondary: #6b7280;      /* secondary text */
  --border-light: #e5e7eb;        /* card borders */
  --bg-white: #ffffff;
  --bg-main: #f8f9fa;
}

/* ======================================================
   GLOBAL TYPOGRAPHY (Responsive for all screen sizes)
====================================================== */

:root {

  --font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;

  /* Base text */
  --font-body: clamp(0.95rem, 0.30vw + 0.90rem, 1.10rem);

  /* Small text */
  --font-small: clamp(0.82rem, 0.20vw + 0.78rem, 0.95rem);

  /* Large paragraph */
  --font-large: clamp(1.05rem, 0.45vw + 0.95rem, 1.25rem);

  /* Headings */
  --font-h1: clamp(2rem, 4vw, 3.4rem);
  --font-h2: clamp(1.6rem, 3vw, 2.5rem);
  --font-h3: clamp(1.25rem, 2vw, 1.8rem);
  --font-h4: clamp(1.05rem, 1.5vw, 1.35rem);

  --line-height: 1.6;
}

/* Base */

body{

    font-family:var(--font-family);

    font-size:var(--font-body);

    line-height:var(--line-height);

    color:var(--text-primary);

    background:var(--bg-main);

    -webkit-text-size-adjust:100%;

}

/* Headings */

h1{font-size:var(--font-h1);}

h2{font-size:var(--font-h2);}

h3{font-size:var(--font-h3);}

h4{font-size:var(--font-h4);}

/* Common text */

p,
li,
a,
button,
input,
select,
textarea{

    font-size:inherit;

}

main {
  min-height: 80vh;
  padding:clamp(1rem,4vw,2rem)
        clamp(1rem,5vw,4rem);
}
/* Search & Filters */
.search-filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: flex-start;
}

.search-filters input,
.search-filters select {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  font-size: inherit;
  outline: none;
}

/*navbar*/
#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: var(--color-primary);
  color: white;

  padding: 1rem clamp(1rem, 4vw, 4rem);

  width: 100%;
  max-width: 100%;
  overflow: hidden;

  flex-wrap: wrap;
  gap: 1rem;
}



/* ===== ABOUT PAGE ===== */
.about-page .content-section {
  background: var(--bg-white);
  padding:clamp(1.25rem,4vw,3rem);
  border-radius: 12px;
  margin: 3rem 0;
}

.about-page h2 {
  margin-bottom: 1rem;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.service-card {
  background: var(--color-muted);
  padding: 1.5rem;
  border-radius: 8px;
  font-weight: 500;
}

.value-list {
  list-style: none;
  padding-left: 0;
}

.value-list li {
  margin-bottom: 0.75rem;
}

.mission-vision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.cta-section {
  text-align: center;
  padding:clamp(1.5rem,4vw,3rem);
  background: var(--color-primary);
  color: white;
  border-radius: 12px;
}

.cta-actions{

display:flex;

justify-content:center;

gap:1rem;

flex-wrap:wrap;

}

.herony {
  text-transform: capitalize;
}

/* satus styles */
.status {
  font-weight: 500;
  margin-top: 10px;
}

.status.success {
  color: green;
}

.status.error {
  color: red;
}

.status.info {
  color: #333;
}


  /* dashboard */
  /* Admin Sidebar Styles */
.admin-sidebar {
  width: 250px;
  min-height: 100vh;
  background-color: var(--bg-white);
  border-right: 1px solid var(--border-light);
  padding: 1rem;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--text-primary);
}

.admin-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-sidebar li {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: var(--text-primary);
  background-color: var(--bg-main);
}

.admin-sidebar li:hover {
  background-color: var(--color-primary);
  color: var(--bg-white);
}

.admin-sidebar li.active {
  background-color: var(--color-primary);
  color: var(--bg-white);
  font-weight: 600;
}

.admin-sidebar li:not(.active):hover {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
  
/* ===============================
   ADMIN LOG TABLE
=============================== */

.admin-log-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-log-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
}

.admin-log-table th,
.admin-log-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.admin-log-table th {
  background: var(--color-primary);
  color: white;
  position: sticky;
  top: 0;
}

.admin-log-table tr:hover {
  background: #f8f9ff;
}

.admin-log-table td {
  color: var(--text-primary);
}

.admin-log-table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* ===============================
   ADMIN USER TABLE
=============================== */

.admin-user-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-user-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
}

.admin-user-table th,
.admin-user-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.admin-user-table th {
  background: var(--color-primary);
  color: white;
}

.admin-user-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.admin-user-table tr:hover {
  background: #f8f9ff;
}

/* ===============================
   DASHBOARD SUMMARY TABLE
=============================== */

.dashboard-summary-wrapper {
  width: 100%;
  overflow-x: auto;
}

.dashboard-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
}

.dashboard-summary-table th,
.dashboard-summary-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.dashboard-summary-table th {
  background: var(--color-primary);
  color: white;
}

.dashboard-summary-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.dashboard-summary-table tr:hover {
  background: #f8f9ff;
}

.dashboard-summary-table td:last-child {
  font-weight: 700;
}

.request-details-row td {
  background: #fafafa;
  font-size: var(--font-small);
  line-height: 1.5;
}

.status-btn {
  margin: 2px;
}
#enrolly{
  color: var(--color-primary);
}

/* ===========================
   SUPPORT PAGE
=========================== */

#contact-form{
    width:min(92%,520px);
    margin:clamp(2rem,5vw,4rem) auto;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

#contact-form input,
#contact-form textarea{

    width:100%;
    padding:0.85rem 1rem;
    font-size:inherit;
    font-family:inherit;
    border:1px solid var(--border-light);
    border-radius:8px;
    box-sizing:border-box;

}

#contact-form input,
#contact-form textarea{width:100%; padding:12px 14px; font-size:15px; box-sizing:border-box;}

#contact-message{ resize:vertical; min-height:110px;}

.training-options{

display:flex;
flex-wrap:wrap;
gap:1rem;
align-items:center;

}

.support-actions{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
}

.training-options label{ display:flex; align-items:center; gap:6px;}

#contact-form button{
    margin-top:1rem;
    align-self:center;
}


/* =====profile page ===== */
/* Highlight selected purchased material */

.highlight-card{

  outline:3px solid var(--color-primary);

  border-radius:10px;

  box-shadow:0 0 18px rgba(79,70,229,.35);

  transition:all .35s ease;

}
.whatsapp-support-btn{

display:inline-block;

margin-top:1.25rem;

max-width:100%;

text-align:center;

}

@media (max-width:768px){

    .training-options{

        flex-direction:column;

        align-items:flex-start;

    }

    #contact-form button{

        width:100%;

    }

    .whatsapp-support-btn{

        width:100%;

    }

}

/*added debugging code*/
@media (max-width: 768px) {

  #purchasedMaterialsGrid,
  #available-videos,
  #available-pdfs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .video-card,
  .pdf-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}