/* Import Montserrat Google Font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

/* Color variables */
:root {
  --primary-color: #2A3F54;
  --secondary-color: #F5A623;
  --background-color: #F0F4F8;
  --text-color: #333333;
  --muted-color: #777777;
}

/* Global */
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--primary-color);
}
a:hover {
  color: var(--secondary-color);
}

.mt-auto    { margin-top: auto; }
.my-4       { margin-top: 1.5rem; margin-bottom: 1.5rem; }

/* only cap at lg and up */
@media (min-width: 992px) {
  .container {
    max-width: 1140px;
  }
}

/* Navbar */
.navbar {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* App name spans */
.app-name {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 60px;
}

.app-name .pp {
  background-color: #28a745;  /* green */
  color: white;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  margin-right: 0.15rem;
  text-transform: uppercase;
}

.app-name .co {
  background-color: #002147;  /* navy */
  color: white;
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  margin-right: 0.15rem;
  text-transform: uppercase;
}

/* Page title centered */
.page-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
}

/* Cards */
.card {
  background: none;
  border: none;
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card h5 {
  font-weight: 600;
  color: var(--primary-color);
}
.card-text {
  color: var(--muted-color);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* Account icon/menu */
#account-icon {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
}
#account-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 1rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
#account-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-color);
}
#account-menu a:hover {
  background-color: var(--background-color);
}

/* Mainboard layout */
.mainboard-container {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.module-group + .module-group {
  margin-top: 2.5rem;
}
.group-title {
  position: relative;
  z-index: 2;
  background: var(--background-color);
  display: inline-block;
  padding: 0 .25rem;
  font-size: 1.4rem;
  font-weight: 600;
  color: #042046;
  border-bottom: 2px solid rgba(4, 32, 70, 1);
  margin-bottom: 1rem;
}

.module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
}
.module-grid.single-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.module-card {
  display: flex;
  align-items: center;
  width: 220px;
  height: 96px;
  padding: 0 1rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #1f2937;
  text-decoration: none;
  transition: transform 0.1s, box-shadow .2s;
  position: relative;
  z-index: 1;
}
.module-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.icon-circle {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}
.icon-circle .bi {
  font-size: 1.4rem;
  color: #fff;
}

.module-label {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1f2937;
}

/* Icon backgrounds */
.bg-icon-tender          { background: #007bff; } 
.bg-icon-estimation      { background: #c05d00; }
.bg-icon-budgeting       { background: #ffcc80; }
.bg-icon-planning        { background: #ce93d8; }
.bg-icon-cost-control    { background: #a5d6a7; }
.bg-icon-commercial      { background: #f0a500; }
.bg-icon-risk            { background: #e57373; }
.bg-icon-reporting       { background: #64a3f6; }
.bg-icon-procurement     { background: #8e24aa; }
.bg-icon-logistic        { background: #ffd54f; }
.bg-icon-requisition     { background: #4dd0e1; }

/* NEW ICON BACKGROUNDS - add here in alphabetical order */
.bg-icon-hse             { background: #198754; }  /* Success green */
.bg-icon-human-resources  { background: #0dcaf0; }  /* Info cyan */

/* Light tints */
.module-tender           { background-color: rgba(0, 123, 255, .1); }
.module-estimation       { background-color: rgba(192,  93,   0, .1); }
.module-budgeting        { background-color: rgba(255, 204, 128, .1); }
.module-planning         { background-color: rgba(206, 147, 216, .1); }
.module-cost-control     { background-color: rgba(165, 214, 167, .1); }
.module-commercial       { background-color: rgba(240, 165,   0, .1); }
.module-risk             { background-color: rgba(229, 115, 115, .1); }
.module-reporting        { background-color: rgba(100, 163, 246, .1); }
.module-procurement      { background-color: rgba(142,  36, 170, .1); }
.module-logistic         { background-color: rgba(255, 213,  79, .1); }
.module-requisition      { background-color: rgba( 77, 208, 225, .1); }
.module-hse              { background-color: rgba(25, 135, 84, 0.1); }
.module-human-resources   { background-color: rgba(13, 202, 240, 0.1); }

/* Keep text dark on tints */
.module-card.module-estimation      .module-label,
.module-card.module-budgeting       .module-label,
.module-card.module-planning        .module-label,
.module-card.module-cost-control    .module-label,
.module-card.module-commercial      .module-label,
.module-card.module-risk            .module-label,
.module-card.module-reporting       .module-label,
.module-card.module-procurement     .module-label,
.module-card.module-logistic        .module-label,
.module-card.module-requisition     .module-label,
.module-card.module-hse             .module-label,
.module-card.module-human-resources .module-label {
  color: var(--text-color);
}

/* Section styles (new tender, etc.) */
.section-tender-info {
  border: 1px solid #0d6efd;
  background-color: rgba(13, 110, 253, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
}
.section-issuance {
  border: 1px solid #ffc107;
  background-color: rgba(255, 193, 7, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
}
.section-tender-team {
  border: 1px solid #198754;
  background-color: rgba(25, 135, 84, 0.05);
  padding: 1rem;
  border-radius: 0.5rem;
}
.section-tender-info h5,
.section-issuance h5,
.section-tender-team h5 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
}