/* css/dashboard.css */
/* Material Design 3 Enterprise - Dashboard & OM Board specialized layouts */

/* ========================================================================
   DASHBOARD STATS GRID
   ======================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--md-sys-spacing-4);
  margin-bottom: var(--md-sys-spacing-6);
}

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

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

/* ========================================================================
   GENERATE QUOTE LAYOUT
   ======================================================================== */
.generate-layout {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-6);
}

/* Quote Preview Panel Override */
.preview-panel {
  background-color: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  box-shadow: none; /* Make it look like a distinct canvas area */
}

.preview-panel .panel-header h2 {
  color: var(--md-sys-color-on-surface);
}

/* ========================================================================
   QUOTE SHEET (Document Preview Area)
   ======================================================================== */
.quote-sheet {
  background-color: #FFFFFF;
  color: #1F1F1F;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  padding: var(--md-sys-spacing-8) var(--md-sys-spacing-10);
  font: var(--md-sys-typescale-body-medium);
  box-shadow: var(--md-sys-elevation-level1);
  margin: 0 auto;
  max-width: 1000px; /* Standard A4ish reading width */
}

.qs-company-line {
  font: var(--md-sys-typescale-headline-medium);
  color: #1F1F1F;
  margin-bottom: var(--md-sys-spacing-1);
}

.qs-doc-title {
  font: var(--md-sys-typescale-title-medium);
  color: #444746;
  letter-spacing: 0.5px;
  margin-bottom: var(--md-sys-spacing-4);
  text-transform: uppercase;
}

.qs-title-bar {
  background-color: #F8F9FA;
  border: 1px solid #DADCE0;
  border-left: 4px solid var(--md-sys-color-primary); /* Primary brand color accent */
  padding: var(--md-sys-spacing-3) var(--md-sys-spacing-4);
  margin-bottom: var(--md-sys-spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  border-radius: 0 var(--md-sys-shape-corner-input) var(--md-sys-shape-corner-input) 0;
}

.qs-title-line {
  font: var(--md-sys-typescale-body-medium);
  color: #444746;
  display: flex;
  align-items: baseline;
}

.qs-title-line span:first-child {
  color: #747775;
  width: 140px; /* Fixed width for alignment */
  flex-shrink: 0;
}

.qs-title-line strong {
  color: #1F1F1F;
  font-weight: 500;
}

.qs-mode {
  margin-left: var(--md-sys-spacing-2);
  color: var(--md-sys-color-primary);
  font-weight: 500;
  font-size: 0.875rem;
}

.qs-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-sys-spacing-3) var(--md-sys-spacing-6);
  font: var(--md-sys-typescale-body-small);
  color: #444746;
  margin-bottom: var(--md-sys-spacing-4);
  padding-bottom: var(--md-sys-spacing-3);
  border-bottom: 1px solid #DADCE0;
}

.qs-section-title {
  font: var(--md-sys-typescale-title-small);
  color: #1F1F1F;
  margin: var(--md-sys-spacing-5) 0 var(--md-sys-spacing-2);
}

.qs-total {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-4) var(--md-sys-spacing-4) var(--md-sys-spacing-6);
  border-top: 2px solid #1F1F1F;
  margin-top: var(--md-sys-spacing-2);
  background-color: #F8F9FA;
  border-radius: 0 0 var(--md-sys-shape-corner-input) var(--md-sys-shape-corner-input);
}

.qs-total span {
  font: var(--md-sys-typescale-title-medium);
  color: #444746;
}

.qs-total strong {
  font: var(--md-sys-typescale-headline-small);
  color: #1F1F1F;
  font-family: var(--md-sys-typescale-font-mono);
}

/* ========================================================================
   ORDER MANAGEMENT (OM) BOARD (Kanban style rows)
   ======================================================================== */
.om-board {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-3);
  margin-top: var(--md-sys-spacing-4);
}

.om-card-row {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  padding: var(--md-sys-spacing-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md-sys-spacing-4);
  box-shadow: var(--md-sys-elevation-level1);
  transition: transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
              border-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
  cursor: pointer;
}

.om-card-row:hover {
  transform: translateY(-2px);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level3);
}

/* Danger Alert Override for OM Card */
.om-card-row.danger-alert {
  border-color: var(--md-sys-color-danger);
  background-color: var(--md-sys-color-danger-container);
}

/* Container Cards within OM Drawer */
.om-container-card {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  padding: var(--md-sys-spacing-5);
  margin-bottom: var(--md-sys-spacing-4);
  box-shadow: var(--md-sys-elevation-level1);
  transition: border-color var(--md-sys-motion-duration-short);
}

.om-container-card:hover {
  border-color: var(--md-sys-color-outline);
}

.om-container-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--md-sys-spacing-3);
  padding-bottom: var(--md-sys-spacing-2);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.om-container-title {
  font: var(--md-sys-typescale-title-small);
  color: var(--md-sys-color-on-surface);
}

/* Batch generation bar in OM */
.om-batch-bar {
  display: flex;
  gap: var(--md-sys-spacing-3);
  background-color: var(--md-sys-color-primary-container);
  padding: var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-input); /* 16px */
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: var(--md-sys-spacing-5);
}

.om-batch-bar .field {
  margin: 0;
}

.om-batch-bar input,
.om-batch-bar select {
  background-color: var(--md-sys-color-surface);
  border-color: transparent;
}

.om-batch-bar input:focus,
.om-batch-bar select:focus {
  border-color: var(--md-sys-color-primary);
}

/* Fees rows inside container card */
.om-fee-row {
  display: flex;
  gap: var(--md-sys-spacing-3);
  align-items: center;
  margin-top: var(--md-sys-spacing-2);
  padding-top: var(--md-sys-spacing-2);
  border-top: 1px dashed var(--md-sys-color-outline-variant);
}

.btn-del-icon {
  color: var(--md-sys-color-danger);
  cursor: pointer;
  padding: var(--md-sys-spacing-1);
  border-radius: var(--md-sys-shape-corner-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--md-sys-motion-duration-short);
}

.btn-del-icon:hover {
  background-color: var(--md-sys-color-danger-container);
}