/* === Alpha Classes theme (desktop + mobile fix) === */

/* New colors: teal + dark green */
:root {
  --primary: #0d7a6b;    /* teal */
  --primary-2: #0a4a3a;  /* dark green */
  --dark: #0f172a;
}

/* Basic reset */
html, body {
  height: auto;
  overflow: auto;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* Navbar + hero background */
.bg-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%) !important;
}

/* Hero / header ko chhota rakho – desktop pe full screen nahi banega */
header.bg-primary,
section.hero {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Hero ke bade-bade headings ko normal size pe lao */
header .display-4,
header .display-5,
header .display-6,
section.hero .display-4,
section.hero .display-5,
section.hero .display-6 {
  font-size: clamp(1.8rem, 3vw, 2.6rem) !important;
  line-height: 1.1 !important;
}

/* Pura hero fixed/stuck na ho – normal block jaisa behave kare */
header,
section.hero {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Cards, buttons, forms, etc. */
.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.btn-primary {
  background-color: #c9972a !important;
  border-color: #c9972a !important;
  color: #000 !important;
}

.btn-primary:hover {
  background-color: #b8851e !important;
  border-color: #b8851e !important;
}

.btn-outline-primary {
  color: #0d7a6b !important;
  border-color: #0d7a6b !important;
}

.btn-outline-primary:hover {
  background-color: #0d7a6b !important;
  border-color: #0d7a6b !important;
  color: #fff !important;
}

.navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.navbar .navbar-brand {
  white-space: nowrap;
  margin-right: 0.6rem;
  font-size: 1.08rem;
}

.navbar .navbar-collapse {
  justify-content: flex-end;
}

.navbar .navbar-nav {
  gap: 0;
}

.navbar .nav-link {
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.5rem 0.34rem !important;
}

.navbar .nav-link.active {
  font-weight: 700;
}

.materials-breadcrumb {
  margin-bottom: 1.75rem;
}

.materials-breadcrumb .breadcrumb {
  margin-bottom: 0;
}

.materials-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(15, 23, 42, 0.55);
}

.folder-card {
  height: 100%;
  padding: 1.4rem 1rem;
  border: 1px solid rgba(13, 122, 107, 0.15);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  text-align: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.folder-card:hover {
  transform: translateY(-4px);
  border-color: rgba(13, 122, 107, 0.35);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}

.folder-card h5 {
  margin-bottom: 0.35rem;
  font-size: 1rem;
}

.folder-card p {
  margin-bottom: 0;
  color: #5b6472;
  font-size: 0.9rem;
}

.folder-icon,
.empty-icon {
  display: inline-block;
  font-size: 2.2rem;
  margin-bottom: 0.8rem;
}

.empty-state {
  padding: 3rem 1rem;
  border: 1px dashed rgba(13, 122, 107, 0.25);
  border-radius: 1rem;
  background: #f8fbfa;
  text-align: center;
}

@media (min-width: 1200px) {
  .navbar .container-fluid {
    align-items: center;
    flex-wrap: nowrap;
  }

  .navbar .navbar-collapse {
    flex-grow: 1;
    min-width: 0;
  }

  .navbar .navbar-nav {
    flex-wrap: nowrap;
    justify-content: flex-end;
    width: 100%;
  }
}

@media (max-width: 1199.98px) {
  .navbar .navbar-nav {
    padding-top: 0.75rem;
  }

  .navbar .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

table {
  margin-top: 20px;
}

.form-section {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 10px;
  margin-top: 30px;
}

/* Body sections ke headings (hero ke nahi) */
h2, h3 {
  color: #111827;
}