/* /assets/css/pages/courses.css?v=1 */

/* ─────────────────────────────────────────────────────────────
  Bright + Compact UI for courses pages
  - filter inputs too wide  → compact grid(4 columns), max page width
  - course name wrapping    → wider course column + ellipsis option
────────────────────────────────────────────────────────────── */

:root{
  --bg: #f6f8fc;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e6ebf5;

  --primary: #2563eb;
  --primary-2: #1d4ed8;

  --danger: #ef4444;
  --danger-2: #dc2626;

  --shadow: 0 8px 24px rgba(17,24,39,.06);
  --radius: 14px;
}

*{ box-sizing:border-box; }
.page{
  max-width: 1480px;         /* [CRS-RESP-WIDE-20260304-001] 저해상도 노트북에서 수업개설 카드 가로폭 확장 */
  margin: 18px auto 60px;
  padding: 0 14px;
  color: var(--text);
}

/* ── Head */
.page__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.page__title{
  margin:0;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.2px;
}
.page__desc{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}
.page__actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── Card */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card + .card{ margin-top:14px; }
.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(to bottom, #ffffff, #fbfcff);
}
.card__title{
  margin:0;
  font-size:15px;
  font-weight:800;
}
.card__meta{
  color:var(--muted);
  font-size:12px;
}
.card__body{ padding:14px; }

/* ── Alerts */
.alert{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  margin: 0 0 12px;
  font-size:13px;
  background:#fff;
}
.alert-success{ border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.alert-danger { border-color:#fecaca; background:#fef2f2; color:#991b1b; }
.alert--ok{ border-color:#bbf7d0; background:#f0fdf4; color:#166534; }
.alert--err{ border-color:#fecaca; background:#fef2f2; color:#991b1b; }

.muted{ color:var(--muted); font-size:13px; }
.hint, .form__hint{ color:var(--muted); font-size:12px; line-height:1.35; margin-top:6px; }

/* ── Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:32px;               /* ✅ 더 컴팩트 */
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition: all .12s ease;
}
.btn:hover{ border-color:#cfd7ea; transform: translateY(-1px); }

/* [CRS-OVR-20260115-203] Override section toolbar */
.override-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  padding:8px 10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:#fbfdff;
  flex-wrap:wrap;
}
.override-toolbar .muted{ margin:0; }
.override-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.override-sum{
  font-size:12px;
  font-weight:800;
  color:#0f172a;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  padding:4px 8px;
  border-radius:999px;
}

/* [CRS-OVR-20260115-204] Override table grouping + remove duplicate row numbers */
#overrideTable tbody tr[data-module-row] td{
  background:#f8fafc;
  font-weight:600;
}
#overrideTable tbody tr[data-module-row] td:first-child{
  color:#1f2937;
}
#overrideTable tbody tr.override-details > td{
  background:#fff;
  padding-top:6px;
  padding-bottom:12px;
}
#overrideTable tbody tr.override-details .table{
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
#overrideTable tbody tr.override-details .table th{
  background:#f3f7ff;
  font-size:12px;
}
#overrideTable tbody tr.override-details .table td:first-child,
#overrideTable tbody tr.override-details .table th:first-child{
  display:none;
}
#overrideTable tbody tr.is-pass td{
  background:#fefce8;
}
#overrideTable tbody tr.is-pass select[name="override_mode"]{
  border-color:#facc15;
}
#overrideTable tbody tr.override-details.is-pass .table th:last-child,
#overrideTable tbody tr.override-details.is-pass .table td:last-child{
  display:none;
}
/* [CRS-OVR-20260115-505] Section color bands */
#overrideTable tbody tr[data-module-row]{
  border-left:4px solid transparent;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+1){
  border-left-color:#60a5fa;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+2){
  border-left-color:#f59e0b;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+3){
  border-left-color:#10b981;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n){
  border-left-color:#a78bfa;
}
#overrideTable tbody tr.override-details{
  border-left:4px solid transparent;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+1) + tr.override-details{
  border-left-color:#60a5fa;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+2) + tr.override-details{
  border-left-color:#f59e0b;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n+3) + tr.override-details{
  border-left-color:#10b981;
}
#overrideTable tbody tr[data-module-row]:nth-of-type(4n) + tr.override-details{
  border-left-color:#a78bfa;
}
/* [CRS-OVR-20260115-401] Wider inputs in override sections */
#overrideTable input.control,
#overrideTable select.control{
  width:100%;
  min-width:0;
}
#overrideTable tbody tr.override-details .table td:nth-child(2) input{
  width:100%;
}
#overrideTable tbody tr.override-details .table td:last-child input{
  width:100%;
}
.btn:active{ transform:none; }
.btn-primary, .btn--primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.btn-primary:hover, .btn--primary:hover{ background:var(--primary-2); border-color:var(--primary-2); }

.btn-danger, .btn--danger{
  background:#fff;
  border-color:#fecaca;
  color:var(--danger-2);
}
.btn-danger:hover, .btn--danger:hover{
  background:#fff5f5;
  border-color:#fca5a5;
}
.btn-sm, .btn--sm{
  height:28px;
  padding:0 10px;
  border-radius:9px;
  font-size:12px;
}

/* ── Form (✅ “칸이 너무 넓다” 해결: 4칸 그리드 + 더 작은 padding) */
.form--grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:10px 12px;
}
.form__row{
  grid-column: span 3;        /* ✅ 4개/줄 → 폭 줄어듦 */
  min-width: 0;
}
.form__row--wide{ grid-column: 1 / -1; }
.form__actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.form__label{
  display:block;
  font-size:12px;
  font-weight:800;
  margin:0 0 6px;
  color:#1f2937;
}

.input, .select, textarea{
  width:100%;
  height:34px;               /* ✅ 컴팩트 */
  padding: 6px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  font-size:13px;
  outline:none;
}
textarea{
  height:auto;
  min-height: 72px;
  resize: vertical;
}
.input:focus, .select:focus, textarea:focus{
  border-color:#b9c7f5;
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}
.is-disabled{ opacity:.6; }

/* Checkbox */
.checkbox{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--text);
}
.checkbox input{ width:16px; height:16px; }

/* ── Table */
.table-wrap{
  width:100%;
  overflow:auto;              /* 화면 좁으면 가로 스크롤 */
  border-radius: 12px;
  border:1px solid var(--border);
}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  min-width: 980px;
  background:#fff;
}
.table thead th{
  position:sticky;
  top:0;
  background:#f8fbff;
  border-bottom:1px solid var(--border);
  font-size:12px;
  font-weight:900;
  color:#334155;
  text-align:left;
  padding:10px 12px;
  white-space:nowrap;
}
.table td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  font-size:13px;
  vertical-align:middle;
}
.table tbody tr:hover td{ background:#fbfdff; }

/* [CRS-LVL-TABS-20260116-003] */
.level-tabs{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.level-tabs .tabs{
  display:flex;
  gap:8px;
}
.level-tabs .tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:32px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid #d6e0f0;
  background:#fff;
  color:#0f172a;
  font-weight:800;
}
.level-tabs .tab.is-active{
  background:#0f172a;
  border-color:#0f172a;
  color:#fff;
}
.level-select-hidden{ /* [CRS-LVL-TABS-20260116-007] */
  display:none;
}
.is-hidden{ display:none !important; } /* [CRS-TPL-20260115-040] 템플릿 UI 숨김 */

/* ✅ 과목명 줄바꿈 방지 + 너무 길면 말줄임(원하면 제거 가능) */
.td-course a{
  display:inline-block;
  max-width: 100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:bottom;
}
.course-sub{
  color:var(--muted);
  font-size:12px;
  margin-left:8px;
  white-space:nowrap;
}

/* ── Badges */
.badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.badge--soft{
  background:#eff6ff;
  border-color:#c7ddff;
  color:#1d4ed8;
}
.badge--outline{
  background:#fff;
  border-color:#dbe6ff;
  color:#1d4ed8;
}

/* Actions in table */
.actions{
  display:flex;
  gap:6px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* ── Enroll page pick UI */
.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field label{
  display:block;
  font-size:12px;
  font-weight:800;
  margin:0 0 6px;
}
.pickArea{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:8px 10px;
}
.pickItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
.pickItem:hover{ background:#fbfdff; }

/* ── Responsive */
@media (max-width: 980px){
  .form__row{ grid-column: span 4; }  /* 3개/줄 */
  .grid{ grid-template-columns: 1fr; }
  .pickArea{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .page__head{ flex-direction:column; align-items:stretch; }
  .page__actions{ justify-content:flex-end; }
  .form__row{ grid-column: 1 / -1; }  /* 1개/줄 */
}

/* [CRS-LIST-STYLE-001] Courses list filters - compact 2-row layout */
.filters {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  background: var(--panel, #fff);
}

.filters .row {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.filters .row + .row {
  margin-top: 10px;
}

.filters .item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 140px;
}

.filters .item.grow {
  flex: 1 1 280px;
  min-width: 220px;
}

.filters .label {
  font-size: 12px;
  color: var(--muted, #6b7280);
  line-height: 1;
  white-space: nowrap;
}

/* inputs */
.filters input[type="number"],
.filters input[type="text"],
.filters select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 10px;
  background: var(--bg, #fff);
  color: inherit;
  outline: none;
}

.filters input[type="number"]:focus,
.filters input[type="text"]:focus,
.filters select:focus {
  border-color: var(--focus, #93c5fd);
  box-shadow: 0 0 0 3px rgba(147,197,253,0.35);
}

/* apply button align */
.filters .btn.primary,
.filters button.btn.primary,
.filters button[type="submit"] {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  white-space: nowrap;
}

/* small screens */
@media (max-width: 720px) {
  .filters .item { min-width: 48%; }
  .filters .item.grow { min-width: 100%; }
}

/* [CRS-LIST-STYLE-002] Filters: brighter palette override */
.filters {
  background: #f8fafc;         /* 아주 밝은 배경 */
  border-color: #e2e8f0;        /* 더 연한 테두리 */
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.filters .label {
  color: #64748b;              /* 밝고 선명한 회색 */
}

.filters input[type="number"],
.filters input[type="text"],
.filters select {
  background: #ffffff;
  border-color: #cbd5e1;        /* input 테두리도 조금 더 밝게 */
}

.filters input[type="number"]:focus,
.filters input[type="text"]:focus,
.filters select:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

/* 적용 버튼도 살짝 더 밝게 */
.filters .btn.primary,
.filters button.btn.primary,
.filters button[type="submit"] {
  background: #3b82f6;
  border-color: #3b82f6;
}
.filters .btn.primary:hover,
.filters button.btn.primary:hover,
.filters button[type="submit"]:hover {
  background: #2563eb;
  border-color: #2563eb;
}