/* ------------------------------
   1. Global Reset & Box Sizing
-------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px; /* Base font size */
}

body {
  font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f4f9;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ------------------------------
 2. Navigation Bar (Header)
-------------------------------*/
header {
  background-color: #ffffff;
  padding: 10px 20px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-left,
.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-brand {
  font-size: 1.5em;
  font-weight: bold;
  color: #34495e;
  text-decoration: none;
  margin-right: 20px;
}

.navbar-menu a {
  margin-left: 15px;
  text-decoration: none;
  color: #34495e;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-menu a:hover,
.navbar-menu a.active {
  background-color: #2980b9;
  color: #fff;
}

/* ------------------------------
 3. Sidebar and Navigation
-------------------------------*/
.container {
  display: flex;
  width: 100%;
  flex: 1;
  margin-top: 60px;
}

.sidebar {
  width: 20%;
  background-color: #34495e;
  color: white;
  padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
}

.sidebar h2 {
  text-align: center;
  color: #ecf0f1;
}

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

.nav-item {
  padding: 10px;
  cursor: pointer;
  background-color: #2c3e50;
  border-radius: 5px;
  margin: 5px 0;
  color: #ecf0f1;
  transition: background-color 0.3s ease;
}

.nav-item:hover {
  background-color: #2980b9;
}

.sub-nav {
  list-style-type: none;
  padding-left: 20px;
  display: none;
}

.sub-nav li {
  padding: 5px 0;
  cursor: pointer;
  background-color: #34495e;
  border-radius: 5px;
  margin: 3px 0;
  color: #ecf0f1;
  transition: background-color 0.3s ease;
}

.sub-nav li:hover {
  background-color: #2980b9;
}

#download-db {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

#download-db:hover {
  background-color: #2980b9;
}

/* ------------------------------
 4. Main Content Area
-------------------------------*/
.content {
  width: 80%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.content-section {
  display: none;
}

.content-section.active {
  display: block;
}

.content-box {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  width: 100%;
  text-align: left;
}

.content-box h1,
.content-box h2,
.content-box h3,
.content-box h4 {
  color: #34495e;
}

.content-box p {
  font-size: 1em;
  color: #606770;
  margin-bottom: 20px;
}

.content-box a {
  color: #3498db;
  text-decoration: none;
}

.content-box a:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* ------------------------------
 5. Forms and Inputs
-------------------------------*/
form {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

label {
  margin-top: 10px;
  font-weight: bold;
  color: #34495e;
}

textarea,
input,
select {
  margin-top: 5px;
  padding: 10px;
  resize: vertical;
  min-height: 40px;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* ------------------------------
 6. Button Styles
-------------------------------*/
button {
  margin-top: 20px;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  transition: background-color 0.3s ease;
  color: #fff;
}

.blue-button {
  background-color: #3498db;
}
.blue-button:hover {
  background-color: #2980b9;
}

.danger-button {
  background-color: #dc3545;
}
.danger-button:hover {
  background-color: #b02a37;
}

.save-button {
  background-color: #3498db;
}
.save-button:hover {
  background-color: #2980b9;
}

.full-width-button {
  width: 100%;
}

/* ------------------------------
 7. Tables
-------------------------------*/
.styled-table {
  width: 100%;
  border-collapse: collapse;
}

.styled-table th, .styled-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.styled-table th {
  background-color: #34495e;
  color: white;
}

.styled-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.styled-table tr:hover {
  background-color: #ddd;
}

/* ------------------------------
 8. Modals
-------------------------------*/
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 2% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 900px;
  border-radius: 10px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.close-button,
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus,
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
}

/* ------------------------------
 9. Blocks and Groups
-------------------------------*/
.bom-block {
  margin-bottom: 30px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.bom-item-label {
  font-weight: bold;
  display: block;
  margin-top: 10px;
}

.bom-item-input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.bom-bill-item {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 15px 0;
  background-color: #f9f9f9;
  border-radius: 5px;
}
.bom-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bom-item-details {
  margin-top: 10px;
  display: none;
}
.bom-item-buttons {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.bom-modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.bom-modal-content {
  background-color: #fefefe;
  margin: 8% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 900px;
  border-radius: 8px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}
.bom-close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.bom-close-button:hover,
.bom-close-button:focus {
  color: black;
  text-decoration: none;
}

.bom-tooltip {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  margin-left: 5px;
  position: relative;
  font-size: 14px;
}
.bom-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 220px;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  white-space: normal;
  display: none;
  z-index: 1;
  font-size: 14px;
}
.bom-tooltip:hover::after {
  display: block;
}
.bom-tooltip::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  display: none;
}
.bom-tooltip:hover::before {
  display: block;
}

@media (max-width: 600px) {
  .bom-item-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

.bom-risk-event {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}
.bom-risk-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bom-risk-event-actions {
  display: flex;
  gap: 5px;
}

.bom-progress-bar {
  width: 100%;
  background-color: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  height: 30px;
  margin-top: 10px;
}
.bom-progress {
  height: 100%;
  width: 0%;
  background-color: #28a745;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-weight: bold;
  transition: width 0.3s ease;
}

.bom-risk-register {
  margin-top: 10px;
  border: 1px dashed #aaa;
  padding: 10px;
  display: none;
}
.bom-risk-register-header {
  font-weight: bold;
  margin-bottom: 10px;
}
.bom-sort-arrow {
  margin-left: 5px;
  font-size: 12px;
  cursor: pointer;
}

.bom-error-message {
  color: #dc3545;
  font-weight: bold;
  margin-top: 10px;
}

.evidence-item .factor-header {
  background-color: #e2e6ea;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 5px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.evidence-item .factor-details {
  display: none;
  margin-top: 10px;
}

.evidence-item .factor-details h4 {
  margin-bottom: 10px;
  font-size: 1.1em;
}

.factor-group {
  margin-bottom: 15px;
}

.factor-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.factor-group input[type="text"],
.factor-group textarea {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 2px;
}

.factor-group .danger-button {
  margin-top: 0 !important;
  margin-bottom: 15px !important;
}

/* ------------------------------
Responsive Design
-------------------------------*/
@media (max-width: 768px) {
  .navbar-menu a {
    margin-left: 10px;
    padding: 6px 10px;
  }
  .content-box {
    padding: 30px;
  }
  .btn-primary {
    width: 100%;
    padding: 10px 20px;
  }
  .sidebar {
    width: 100%;
    height: auto;
  }
  .content {
    width: 100%;
  }
  .nav-item,
  .sub-nav li {
    text-align: center;
  }
  .navbar-brand {
    font-size: 1.2em;
  }
  header, footer {
    padding: 10px 15px;
  }
  .content-box h1 {
    font-size: 1.5em;
  }
  .content-box p {
    font-size: 0.95em;
  }
  .asset-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .risk-event-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .evidence-controls {
    flex-direction: column;
  }
  #questions-container {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Additional mobile-specific styles can be added here */
}

/* ------------------------------
Additional Styles from Previous styles.css
-------------------------------*/
.asset-item {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 15px 0;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.asset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.asset-details {
  margin-top: 10px;
  display: none;
}

.asset-buttons {
  margin-top: 10px;
}

.risk-event {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}

.risk-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.risk-event-actions button {
  margin-left: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.risk-event-actions .edit-btn {
  background-color: #3498db;
  color: #fff;
}

.risk-event-actions .view-btn {
  background-color: #28a745;
  color: #fff;
}

.sub-events {
  margin-top: 10px;
  display: none;
}

.hidden {
  display: none;
}

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.gap-15 {
  gap: 15px;
}

#add-software-asset-button {
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  background-color: #3498db;
  width: 100%;
  transition: background-color 0.3s ease;
}

#add-software-asset-button:hover {
  background-color: #2980b9;
}

#saveRiskEventBtn {
  background-color: #28a745;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
}

#saveRiskEventBtn:hover {
  background-color: #218838;
}

.math-formula {
  background-color: #f1f1f1;
  padding: 10px;
  margin: 10px 0;
  font-family: 'Courier New', Courier, monospace;
  overflow-x: auto;
}

.tooltip {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #6c757d;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  margin-left: 5px;
  position: relative;
  font-size: 14px;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  width: 220px;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  white-space: normal;
  display: none;
  z-index: 1;
  font-size: 14px;
}

.tooltip:hover::after {
  display: block;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  display: none;
}

.tooltip:hover::before {
  display: block;
}

.cost-item-create {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fefefe;
}
.cost-item-create label {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #34495e;
}

.cost-item-create input,
.cost-item-create textarea {
  display: block;
  width: 100%;
  margin-bottom: 10px; 
}

.cost-item-entry {
  margin-bottom: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cost-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notes-div {
  margin-left: 10px;
  padding: 5px;
  border-left: 3px solid #3498db;
  background-color: #f9f9f9;
  display: none;
}

.edit-cost-form {
  display: none;
  margin-top: 10px;
  padding: 8px;
  background-color: #f0f0f0;
  border-left: 3px solid #3498db;
  border-radius: 4px;
}

.homepage-container-index {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 60px;
  min-height: auto;
  padding: 0 20px;
}
.homepage-left-index {
  flex: 1;
  max-width: 600px;
}
.homepage-right-index {
  flex: 0 1 360px;
}
.login-box-index {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 20px 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.login-box-index h2 {
  margin-bottom: 15px;
  color: #34495e;
}
.login-box-index form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-box-index input {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
}
.login-box-index button {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.3s ease;
}
.login-box-index button:hover {
  background-color: #2980b9;
}
.divider-index {
  border-top: 1px solid #ddd;
  margin: 20px 0;
  position: relative;
}
.create-account-btn-index {
  background-color: #3498db;
  margin-top: 0;
}
.create-account-btn-index:hover {
  background-color: #2980b9;
}
.login-subtext-index {
  margin-top: 20px;
  font-size: 0.85rem;
  color: #606770;
  text-align: center;
}
.login-subtext-index a {
  color: #3498db;
  text-decoration: none;
}
.login-subtext-index a:hover {
  color: #2980b9;
  text-decoration: underline;
}
.message-index {
  margin-top: 15px;
  font-weight: bold;
  color: green;
}
.error-message-index {
  margin-top: 15px;
  font-weight: bold;
  color: red;
}
.signup-container-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-top: 80px;
  min-height: calc(100vh - 80px);
  padding: 0 20px;
}
.signup-left-signup {
  flex: 1;
  max-width: 600px;
}
.signup-right-signup {
  flex: 0 1 360px;
}
.signup-box-signup {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px 20px 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.signup-box-signup h2 {
  margin-bottom: 15px;
  color: #34495e;
}
.signup-box-signup form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signup-box-signup input {
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  width: 100%;
}
.signup-box-signup button {
  background-color: #3498db;
  color: #fff;
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 8px;
  transition: background-color 0.3s ease;
}
.signup-box-signup button:hover {
  background-color: #2980b9;
}
.divider-signup {
  border-top: 1px solid #ddd;
  margin: 20px 0;
  position: relative;
}
.message-signup {
  margin-top: 15px;
  font-weight: bold;
  color: green;
}
.error-message-signup {
  margin-top: 15px;
  font-weight: bold;
  color: red;
}

/* -----------------------------------------
   Calendar Specific Styles
------------------------------------------*/
#calendar-calendar-view table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#calendar-calendar-view th,
#calendar-calendar-view td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  vertical-align: top;
  height: 100px;
  position: relative;
}

#calendar-calendar-view th {
  background-color: #34495e;
  color: white;
}

.calendar-day-number {
  position: absolute;
  top: 5px;
  left: 5px;
  font-weight: bold;
}

.calendar-events {
  margin-top: 25px;
  font-size: 0.85em;
  max-height: 60px;
  overflow-y: auto;
}

.calendar-event-item {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.calendar-event-item:not(:first-child) {
  border-top: 2px dashed black;
  margin-top: 2px;
  padding-top: 2px;
}

.calendar-view-switcher {
  margin-bottom: 10px;
}

.calendar-view-switcher button {
  margin-right: 5px;
}

.calendar-period-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#calendar-period-title,
.calendar-period-title {
  font-size: 1.2em;
  font-weight: bold;
}

.calendar-day-view {
  padding: 10px;
}

.calendar-day-event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.calendar-day-event-item {
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

td.calendar-clickable {
  cursor: pointer;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.data-table th, .data-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.data-table th {
  background-color: #f2f2f2;
  text-align: left;
}
/* ----- Item Specific Plans Page ----- */
.item-specific-plans-search-bar-container {
  margin-bottom: 15px;
}

.item-specific-plans-asset-item {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.item-specific-plans-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-specific-plans-details {
  margin-top: 10px;
}

/* Risk event plan blocks */
.item-specific-plans-risk-event-plan {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

.item-specific-plans-risk-event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-specific-plans-risk-event-content {
  margin-top: 10px;
}

/* Ensure hidden-by-default sections stay hidden */
.plan-details,
.risk-event-plans-content {
  display: none;
}

/* Toggle visibility */
.plan-details.visible,
.risk-event-plans-content.visible {
  display: block;
}
/* NIST question styling for Item Specific Plans */
.nist-question {
  margin-top: 10px;
}
.nist-question label {
  display: block;
  font-weight: bold;
  margin-bottom: 4px;
}
.nist-question textarea {
  display: block;    /* force it onto its own line */
  width: 100%;
  resize: vertical;
  /* rows="4" is already set in the JS, so each box will be 4 rows tall */
}
/* Internal Employees Management scoped styles */
#internal-employees-container .section {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}
#internal-employees-container .section-title {
  margin-top: 20px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f1f1f1;
  padding: 5px;
  cursor: pointer;
}
#internal-employees-container .section-content {
  display: none;
  margin-top: 10px;
}
#internal-employees-container .input-group {
  margin-bottom: 15px;
}
#internal-employees-container .editing-indicator {
  margin-bottom: 10px;
  font-weight: bold;
}
/* Training/process styling */
.process-level {
  margin-left: 0;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.step-level {
  margin-left: 20px;
  border-left: 2px solid #aaa;
  padding-left: 10px;
  margin-bottom: 5px;
}
.substep-level {
  margin-left: 40px;
  border-left: 2px dashed #888;
  padding-left: 10px;
  margin-bottom: 5px;
}
hr.dashed-separator {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 20px 0;
}
/* Make every little process‐form stack title over description */
.step-level .form-container,
.substep-level .form-container,
.module-item .form-container,
.submodule-item .form-container {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Title fields: exactly one text‐row high, full width */
.single-line,
input[type="text"].single-line {
  width: 100%;
  height: 1.5em;     /* roughly one text row */
  line-height: 1.5em;
}

/* Description fields: exactly four rows high, full width */
.multi-line,
textarea.multi-line {
  width: 100%;
  height: calc(1.5em * 4);  /* four text rows */
  line-height: 1.5em;
}
/* Chat Widget Container */
#chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'Roboto', sans-serif;
}

/* Chat Toggle Button */
#chat-toggle {
  width: 60px;
  height: 60px;
  background-color: #3498db;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: background-color 0.3s ease;
}
#chat-toggle:hover {
  background-color: #2980b9;
}

/* Chat Panel */
#chat-panel {
  width: 300px;
  height: 400px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Chat Header */
#chat-header {
  background-color: #34495e;
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

/* Chat Messages Area */
#chat-messages {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  font-size: 14px;
}

/* Chat Input Area */
#chat-input-area {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#chat-user-input {
  flex: 1;
  resize: none;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 5px;
}

#chat-send-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#chat-send-btn:hover {
  background-color: #2980b9;
}

/* Chat bubbles */
.chat-bubble-user {
  background-color: #3498db;
  color: white;
  padding: 8px 12px;
  border-radius: 15px 15px 0 15px;
  margin-bottom: 10px;
  max-width: 80%;
  align-self: flex-end;
}

.chat-bubble-bot {
  background-color: #ecf0f1;
  color: #34495e;
  padding: 8px 12px;
  border-radius: 15px 15px 15px 0;
  margin-bottom: 10px;
  max-width: 80%;
  align-self: flex-start;
}

/* Loading Typing Indicator */
.typing-indicator {
  font-style: italic;
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
}
.playbook-step {
  margin-bottom: 1em;
  border: 1px solid #ccc;
  padding: 0.8em;
  border-radius: 4px;
}

.playbook-step-title {
  width: 100%;
  margin-bottom: 0.5em;
  padding: 0.4em;
  font-size: 1em;
}

.playbook-step-details {
  margin-top: 0.5em;
  width: 100%;
  font-size: 0.95em;
  padding: 0.5em;
  resize: vertical;
}

.red-button {
  background-color: #b30000;
  color: white;
  margin-left: 0.5em;
}
button:disabled {
  background-color: #ccc;    /* light gray */
  cursor: not-allowed;       /* blocked icon */
  opacity: 0.6;              /* faded look */
}
/* === Remove left sidebar and let content fill the width === */
.sidebar { 
  display: none !important; 
}

.content {
  width: 100% !important;
  flex: 1 1 auto;
}

/* --- Discover Grid Layout with borders --- */
.discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #ddd;        /* outer border */
  border-radius: 8px;
  overflow: hidden;              /* keep border radii clean */
}

@media (max-width: 1200px) {
  .discover-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .discover-grid {
    grid-template-columns: 1fr;
  }
}

.discover-card {
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  /* Remove double borders by only keeping top/left on grid container */
  border-width: 0 1px 1px 0;
}

.discover-card h4 {
  margin: 0 0 6px;
}
/* --- Desktop: text on left, login on right --- */
.homepage-left-index  { order: 1; }
.homepage-right-index { order: 2; }

/* --- Mobile: stack login first, then title, then paragraph; ensure no gap under nav --- */
@media (max-width: 768px) {
  /* Make header participate in layout so content starts right below it */
  header {
    position: sticky !important;  /* override fixed */
    top: 0;
    z-index: 1000;
  }

  /* Allow nav to wrap cleanly on small widths */
  .navbar { flex-wrap: wrap; }

  /* Remove any spacing that could create a white bar under the nav */
  body { padding-top: 0 !important; }
  .container,
  .homepage-container-index {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .homepage-container-index {
    flex-direction: column;        /* vertical stack */
    align-items: stretch;          /* full-width sections */
    gap: 20px;
    padding: 0 16px;
    min-height: auto;              /* don’t force viewport height */
  }

  /* Login box first on mobile */
  .homepage-right-index {
    order: 1;                      /* 1st */
    flex: 1 1 auto;
    width: 100%;
  }

  /* Heading + paragraph second */
  .homepage-left-index {
    order: 2;                      /* 2nd */
    max-width: none;
  }

  /* Tweak mobile typography spacing a bit */
  .homepage-left-index h1 {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 0;
  }

  .homepage-left-index p {
    font-size: 1rem;
    margin-top: 8px;
  }

  /* Keep the login card nicely sized on small screens */
  .login-box-index {
    max-width: 600px;
    margin: 0 auto;
  }
}
/* ===========================
   Mobile polish (add to end)
   ===========================*/
@media (max-width: 768px) {
  /* 1) Flatten the mobile nav UI (remove the extra rounded/boxed look) */
  /* These selectors are defensive to catch common toggle/button wrappers
     coming from your top-navigation.js without touching desktop. */
  header .navbar .menu-toggle,
  header .navbar .nav-toggle,
  header .navbar .hamburger,
  header .navbar button,
  header .navbar .toggle,
  #top-navigation .menu-toggle,
  #top-navigation .nav-toggle,
  #top-navigation .hamburger,
  #top-navigation button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* If your nav injected a card-like wrapper, strip that too */
  #top-navigation,
  #top-navigation *[class*="card"],
  #top-navigation *[class*="box"],
  #top-navigation *[class*="wrapper"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Keep header spacing tidy on mobile */
  header {
    padding: 8px 12px;
  }

  /* 2) Prevent any horizontal scroll / blank space on the right */
  html, body {
    overflow-x: hidden; /* block stray overflow */
  }

  /* Guard against 100vw + padding combos */
  .homepage-container-index,
  .container {
    width: 100%;
    max-width: 100%;
  }

  /* Make sure inner sections never exceed viewport width */
  .homepage-left-index,
  .homepage-right-index,
  .login-box-index,
  .content,
  .content-box {
    max-width: 100%;
  }

  /* Slightly reduce horizontal padding so nothing nudges past the edge */
  .homepage-container-index {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Inputs/buttons wrap nicely without pushing width */
  .login-box-index form,
  .login-box-index input,
  .login-box-index button {
    width: 100%;
  }
}

/* Extra safety: any absolutely wide elements won’t cause a scrollbar */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ===========================
   Mobile-safe overflow fixes
   (append at end of styles.css)
   ===========================*/

/* 1) Code blocks: allow horizontal scroll without widening the page */
pre,
pre.code {
  max-width: 100%;
  overflow-x: auto;              /* scroll sideways when needed */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: pre;              /* keep code formatting (no wrapping) */
  contain: inline-size;          /* prevents pre from expanding layout width */
}

/* Optional: slightly smaller code on narrow screens for readability */
@media (max-width: 768px) {
  pre,
  pre.code {
    font-size: 0.875rem;         /* ~14px (tweak if you like) */
  }
}

/* 2) Inline code: don’t force the line off-screen */
code.inline {
  white-space: normal;           /* allow wrapping */
  word-break: break-word;        /* wrap very long tokens (e.g., hashes/URLs) */
}

/* 3) Tables: scroll within the table instead of expanding the viewport */
.styled-table,
.data-table,
#calendar-calendar-view table {
  display: block;                /* enable overflow on the element itself */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 4) Generic safety: never let common content boxes exceed the viewport width */
.doc-wrap,
.content,
.content-box,
.doc-card {
  max-width: 100%;
  overflow-wrap: anywhere;       /* break up extremely long words/URLs in prose */
}

/* 5) Final guard: if any element still tries to push the page wider, hide it at the page level */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
}
.homepage-meta-index {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 0.75rem;
}
.index-section-spacer {
  margin-bottom: 10px;
}