/* directory-green.css
   Load AFTER bootstrap.min.css, theme tokens and style.css.
   Re-colours the grey defaults in style.css using the DBIM theme variables,
   so the page follows <html data-theme="green"> (or any other theme / dark mode). */

body { background: var(--white); color: var(--black); }

/* ---------- Header ---------- */
header .logobox svg g path { fill: var(--black-pure); }
header .logobox p, header .logobox h1 { color: var(--black-pure); }
header .input-group { border-bottom-color: var(--key);}
header .input-group .form-control { background: var(--white); color: var(--black); }
header .menuright .menutop li { border-right-color: var(--key); }
header .menuright .menutop li .material-symbols-outlined,
header .input-group .search-icon-btn { color: var(--key); }
header .menuright .menutop li .menuicon { background: var(--white); color: var(--black); }

/* ---------- Banner ---------- */
.Innerbaner {
  background:
    linear-gradient(to right, var(--banner-transparency) 20%, transparent 80%),
    linear-gradient(135deg, var(--c1), var(--c2));
  min-height: 245px;
}
.Innerbaner { overflow: hidden; }
.Innerbaner::before { display: none; }
.Innerbaner .banner-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* .Innerbaner .container-fluid { position: relative; z-index: 1; } */
.Innerbaner .innerbox { bottom: 60px; z-index: 3; }
.Innerbaner .innerbox .breadcrumb li,
.Innerbaner .innerbox .breadcrumb li a,
.Innerbaner .innerbox .breadcrumb li::before,
.Innerbaner .innerbox .pagename { color: var(--on-key) !important; }
.Innerbaner .innerbox .breadcrumb li a { text-decoration: underline; }

/* ---------- Inner nav pill ---------- */
.innernav { background: var(--key); position: relative; z-index: 10;
  padding-inline: 16px;}
.innernav .nav-link,
.innernav .nav-link:hover,
.innernav .nav-link:focus { color: var(--on-key); }
.innernav .nav-link.active { margin-left: 28px; }
.innernav .nav-link.active::before { left: -22px; }
.innernav .scroll-btn { background: var(--c2); color: var(--on-key); }

/* ---------- Search + per-page ---------- */
.filterbox .input-group { border-color: var(--c2); border-radius: 0; border-width: 1px; border-bottom-width: 1px; padding: 0; outline: 2px solid var(--key);
  outline-offset: 1px;}
.filterbox .input-group .input-group-text { background: transparent; border: 0; }
.filterbox .input-group .input-group-text .material-symbols-outlined { color: var(--c2); border: 1;}
.filterbox .input-group .form-control,
.filterbox .input-group .form-select {
  border: 0; box-shadow: none; background-color: var(--white); color: var(--black);
}
.filterbox .input-group:focus-within {
  outline: 2px solid var(--key);
  outline-offset: 1px;
}

/* ---------- Clear all ---------- */
.filterbox .clearbtn {
  color: var(--key); border: 1px solid var(--key) !important; background: var(--white);
  align-self: center; min-width: 0; cursor: pointer;
}
.filterbox .clearbtn:hover, .filterbox .clearbtn:focus { background: var(--c5); color: var(--key) !important; }
.filterbox .clearbtn[hidden] { display: none; }
.filterbox .clearbtn .material-symbols-outlined { font-size: 1.8rem; }

/* ---------- Alphabet bar ---------- */
.alphabetBox {
  background: var(--bright-gray);
  justify-content: center;
  margin: 28px 0;
}
.alphabetBox button {
  color: var(--key);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 1.6rem;
}
.alphabetBox button:hover { background: var(--c5); }
.alphabetBox button.active { background: var(--key); color: var(--on-key); font-weight: 700; }
.alphabetBox button:focus-visible { outline: 2px solid var(--key); outline-offset: 2px; }

/* ---------- Directory rows ---------- */
.directoryBox { border-bottom: 1px solid var(--grey-01); padding: 20px; }
.directoryBox .material-symbols-outlined { color: var(--key); }
.directoryBox .designation { color: var(--key); font-size: 1.2rem; }
.directoryBox .name { font-size: 1.8rem; color: var(--black); margin: 2px 0 8px; }
.directoryBox .departmentBadge {
  display: inline-block;
  background: var(--c4);
  color: var(--key);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 1.3rem;
}
.directoryBox .contact-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.directoryBox .contact-line p { margin: 0; font-size: 1.5rem; line-height: 1.5; word-break: break-word; }
.directoryBox a { color: var(--link); }
.directory-empty { padding: 40px 0; text-align: center; color: var(--rhythm); }

/* ---------- Footer ---------- */
footer .feedbackbox { background: var(--bright-gray); }
footer .footerbox { background: var(--key); color: var(--on-key); }
footer .footerbox a, footer .footerbox span { color: var(--on-key); }

/* Dark / high-contrast mode keeps borders visible */
[data-mode="dark"] .directoryBox,
[data-mode="dark"] .filterbox .input-group,
[data-mode="dark"] .innernav { border: 1px solid var(--black); }

@media (min-width: 992px) {
  .innernav {
    padding-inline: 24px;
  }
}