/* ===========================
   components.css
   (Card / Form / Table / Button)
=========================== */

/* ========= Card ========= */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.card-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

/* ========= Form ========= */
.form-section {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.form-group {
  margin-bottom: 16px;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  font-size: 14px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* ========= Button ========= */
.save-btn,
.excel-btn,
.bu-btn {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.save-btn:hover,
.bu-btn:hover {
  background: var(--color-primary-dark);
}

.small {
  padding: 6px 12px;
  font-size: 13px;
}

.excel-btn {
  background: #475569;
}

/* ========= Table ========= */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 10px;
  border: 1px solid var(--color-border);
  text-align: left;
}

th {
  background: #e2e8f0;
  font-weight: 600;
}

tr:nth-child(even) {
  background: #f8fafc;
}

/* ========= Row Header ========= */
.row-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}

/* ========= Utility ========= */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.page-layout {display:flex;gap:24px;}
.left-form {flex:0 0 40%;}
.right-cards.two-cols {flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;}