/* Coach Management – frontend styles
   Branding aligned with booking UI: clean cards, green primary, DM Sans. */

.cm-wrap{
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
}

.cm-card{
  background:#fff;
  border:1px solid rgba(15, 23, 42, .12);
  border-radius:14px;
  padding:18px;
  box-shadow:0 8px 20px rgba(2, 6, 23, .06);
  max-width: 880px;
  margin: 0 auto;
}

.cm-title{
  margin:0 0 14px;
  font-size: 20px;
  font-weight: 700;
}

.cm-form .cm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.cm-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size: 13px;
  font-weight: 600;
}

.cm-field input,
.cm-field textarea{
  font: inherit;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .18);
  outline: none;
  background: #fff;
}

.cm-field input:focus,
.cm-field textarea:focus{
  border-color: rgba(22, 163, 74, .75);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

.cm-field-wide{ grid-column: 1 / -1; }

.cm-help{
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 23, 42, .72);
}

.cm-btn{
  border: none;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 12px;
  width: 100%;
}

.cm-btn-primary{
  background: #16a34a;
  color: #fff;
}

.cm-btn-primary:hover{
  filter: brightness(0.95);
}

.cm-notice{
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

.cm-notice-success{
  border-color: rgba(22, 163, 74, .35);
  background: rgba(22, 163, 74, .08);
}

.cm-notice-error{
  border-color: rgba(220, 38, 38, .35);
  background: rgba(220, 38, 38, .06);
}

.cm-notice-info{
  border-color: rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .06);
}

.cm-grid-list{
  display:grid;
  gap: 14px;
}

.cm-cols-1{ grid-template-columns: 1fr; }
.cm-cols-2{ grid-template-columns: 1fr 1fr; }
.cm-cols-3{ grid-template-columns: 1fr 1fr 1fr; }
.cm-cols-4{ grid-template-columns: 1fr 1fr 1fr 1fr; }

.cm-coach-card{
  background:#fff;
  border:1px solid rgba(15, 23, 42, .12);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(2, 6, 23, .06);
}

.cm-coach-img{
  aspect-ratio: 1 / 1;
  background: rgba(15, 23, 42, .04);
}

.cm-coach-img img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.cm-coach-body{
  padding: 12px 14px 14px;
}

.cm-coach-name{
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
}

.cm-coach-meta{
  font-size: 12.5px;
  color: rgba(15, 23, 42, .78);
  line-height: 1.5;
  margin-bottom: 10px;
}

.cm-meta-row{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 6px;
}

.cm-meta-label{
  min-width: 62px;
  font-weight: 800;
  color: rgba(15, 23, 42, .78);
}

.cm-meta-value{ flex: 1; }

.cm-link{
  color: #16a34a;
  text-decoration: none;
  font-weight: 700;
}

.cm-link:hover{ text-decoration: underline; }

.cm-coach-desc{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15, 23, 42, .92);
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, .10);
}

@media (max-width: 820px){
  .cm-form .cm-grid{ grid-template-columns: 1fr; }
  .cm-card, .cm-notice{ max-width: 100%; }
  .cm-cols-3, .cm-cols-4{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px){
  .cm-cols-2, .cm-cols-3, .cm-cols-4{ grid-template-columns: 1fr; }
}