@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap');

.header-brand {
    font-family: Arial, sans-serif;
    font-weight: 700;         /* Bold */
    font-size: 2rem;          /* Adjust as needed for visibility */
    color: #21451c;           /* A strong green, tweak for your theme */
    letter-spacing: 0.5px;
}

.header-tagline {
    font-family: Arial, sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: #444;
    margin-top: 0.25rem;
}

.header-bar {
  background: #111 !important;
  border-bottom: 2px solid #222;
}
.company-title {
  color: #fff !important;
}

a {
    text-decoration: none !important;
}


.navbar, .navbar-nav .nav-link, .navbar-brand {
  color: #fff !important;
  font-size: 1.1rem !important;
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link[aria-current="page"] {
  color: #ffda3a !important;
}

#add-item-form {
  scroll-margin-top: 80px;  /* adjust as needed to match your navbar height */
}



/* ======= Screen styles ======= */
input[type="checkbox"][disabled],
textarea[disabled] {
  background-color: white !important;
  color: black !important;
  opacity: 1 !important;
  border: 1px solid black;
}

/* Bigger checkboxes */
input[type="checkbox"][disabled] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 30px;
  height: 30px;

  border: 2px solid #000;
  border-radius: 4px;
  position: relative;
  cursor: default;
}

input[type="checkbox"][disabled]:checked::before {
  content: "✔";
  position: absolute;
  top: 0;
  left: 3px;
  font-size: 20px;
  color: black;
  user-select: none;
}

/* Centre table cell contents horizontally and vertically */
table.table td,
table.table th {
  text-align: center;
  vertical-align: middle;
}

/* ======= Print-specific styles ======= */
@media print {
  /* You can override or add print-only styles here */
  body,
  .navbar-brand,
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', Arial, sans-serif;
  }

}

/* ===== Quote Builder Modern Styles ===== */
.summary-card {
    min-height: 320px;
    box-shadow: 0 8px 24px 0 rgba(60,72,100,0.09), 0 1.5px 4px 0 rgba(60,72,100,0.13);
    border-radius: 1.2rem;
    padding: 0 0 10px 0;
    margin-bottom: 0.5rem;
}
.summary-card .card-header {
    border-radius: 1.2rem 1.2rem 0 0 !important;
    font-size: 1.2em;
    letter-spacing: 0.01em;
    box-shadow: none;
    border-bottom: 1.5px solid #e6e8ee;
}
.summary-table td {
    padding: 0.37em 0.5em;
    font-size: 1.12em;
    border: none;
    vertical-align: middle;
}
.summary-table tr:not(:last-child) td {
    border-bottom: 1px solid #e6e8ee;
}
.summary-total {
    font-size: 2.1em;
    font-weight: 800;
    color: #157347;
    letter-spacing: 0.03em;
    margin: 0.3em 0 0.1em 0;
    text-align: center;
}
.summary-caption {
    font-size: 1.01em;
    text-align: center;
    color: #777;
    margin-bottom: 0.5em;
}
.quote-section-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #23416e;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.card.form-section {
    border-radius: 1rem;
    margin-bottom: 1.2rem;
    padding-bottom: 0.4rem;
}
.form-section .card-header {
    border-radius: 1rem 1rem 0 0;
    font-size: 1.12em;
    background: #184b98;
}
.form-label {
    font-weight: 600;
    color: #184b98;
}

@media (max-width: 1200px) {
    .summary-card, .quote-date-card { min-width: 310px; }
    .summary-total { font-size: 1.4em; }
}

.quote-date-card {
  min-height: 320px;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(44, 62, 80, 0.10);
  overflow: hidden;
}

.mega-calendar-icon {
  font-size: 2.5rem;
  display: block;
}

.date-row {
  background: #f6fcf6;
  border-radius: 10px;
  padding: 12px 10px;
  box-shadow: 0 2px 8px rgba(76,175,80,.06);
  gap: 0.75rem;
}

.date-input-container input[type="date"].form-control {
  font-size: 1.8rem;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
  height: 56px;
}

.save-btn {
  font-size: 1.2rem;
  min-width: 100px;
  height: 56px;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(76,175,80,.12);
}

.quote-date-card .form-text {
  font-size: 1em;
}

.col-desc    { width: 32%; min-width: 220px; max-width: 340px; }
.col-supplier{ width: 17%; min-width: 110px; max-width: 180px; }
.col-qty     { width: 8%;  min-width: 56px;  max-width: 80px;  text-align: center;}
.col-check   { width: 8%;  min-width: 56px;  max-width: 80px;  text-align: center;}
.col-notes   { width: 35%; min-width: 180px; max-width: 320px; }

.material-list-table .col-notes textarea {
  width: 98% !important;
  min-width: 140px;
  max-width: 98%;
  resize: vertical;
  overflow: hidden !important;
  pointer-events: none; /* Optional: prevents text selection and interaction */
}

.awesomplete {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.awesomplete > input.form-control {
  width: 100% !important;
  max-width: 100% !important;
}