/**
 * FOMS - Modules Stylesheet
 * Forms, Order Wizard, Quality Issue Tracker, Reports, and Settings
 */

/* Form Elements & Grids */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-main);
}

.form-label .required {
  color: var(--color-danger);
}

.form-hint {
  font-size: 11px;
  color: var(--color-text-subtle);
}

textarea.form-control {
  height: auto;
  min-height: 80px;
  padding: 10px 12px;
  resize: vertical;
}

/* =========================================
   ORDER WIZARD & DETAIL ITEMS
   ========================================= */
.order-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 12px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.order-items-table th {
  background-color: #f8fafc;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.order-items-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

/* =========================================
   QUALITY ISSUE BOARD & REVISIONS
   ========================================= */
.issue-badge-jelek {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.issue-badge-terbaca {
  background-color: #ffedd5;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.issue-badge-ok {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.quality-card {
  border-left: 4px solid var(--color-primary);
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quality-card.danger { border-left-color: var(--color-danger); }
.quality-card.warning { border-left-color: var(--color-warning); }
.quality-card.success { border-left-color: var(--color-success); }

/* =========================================
   REPORTS & CHARTS
   ========================================= */
.report-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background-color: #ffffff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  flex-wrap: wrap;
}

.chart-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chart-wrapper {
  position: relative;
  height: 280px;
  width: 100%;
}

/* =========================================
   SETTINGS & TABS
   ========================================= */
.tabs-nav {
  display: flex;
  gap: 6px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 2px;
}

.tab-btn {
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.tab-btn:hover {
  color: var(--color-text-main);
  background-color: var(--color-surface-subtle);
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  margin-bottom: -3px;
  background-color: var(--color-surface);
}

/* Status Badges for Orders */
.status-draft { background-color: #f1f5f9; color: #475569; }
.status-menunggu { background-color: #fef3c7; color: #92400e; }
.status-proses { background-color: #e0f2fe; color: #075985; }
.status-selesai { background-color: #dcfce7; color: #166534; }
.status-batal { background-color: #fee2e2; color: #991b1b; }

@media (max-width: 768px) {
  .form-grid-2, .form-grid-3 {
    grid-template-columns: 1fr;
  }
}