/*
 * admin.css — shared styles for Checkmates admin views
 *
 * Usage in templates:
 *   {% load static %}
 *   <link rel="stylesheet" href="{% static 'webflow/css/admin.css' %}">
 *
 * All selectors are namespaced with `.cm-` to avoid collisions.
 */

/* ─────────────────────────────────────────
   Tokens
───────────────────────────────────────── */
:root {
  --cm-green:        #127f28;
  --cm-green-dark:   #0e6620;
  --cm-green-deep:   #0b4f1a;
  --cm-green-light:  #f0fdf4;
  --cm-green-bg:     #f9fbf9;
  --cm-green-border: #86efac;

  --cm-yellow:       #c8a000;
  --cm-yellow-light: #fffbe6;
  --cm-yellow-border:#f0c040;

  --cm-red:          #c0392b;
  --cm-red-light:    #fdecea;
  --cm-red-border:   #f5a0a0;

  --cm-orange:       #e67e22;

  --cm-text:         #1c1b1f;
  --cm-text-sub:     #555;
  --cm-text-muted:   #888;
  --cm-text-faint:   #aaa;

  --cm-border:       #e0e0e0;
  --cm-shadow:       0 2px 12px rgba(0, 0, 0, 0.08);
  --cm-radius:       14px;
  --cm-radius-sm:    8px;
  --cm-radius-pill:  100px;
}

/* ─────────────────────────────────────────
   Page layout
───────────────────────────────────────── */
.cm-page {
  max-width: 100%;
  padding: 32px 40px 60px;
  font-family: 'Montserrat', Arial, sans-serif;
}

.cm-page--flush { padding-left: 0; padding-right: 0; }

@media (max-width: 768px) {
  .cm-page { padding: 20px 16px 40px; }
  .cm-page--flush { padding-left: 0; padding-right: 0; }
}

/* ─────────────────────────────────────────
   Page header — two variants:
   .cm-header           simple flex row (space-between)
   .cm-header-row       3-column: spacer | centered content | actions
───────────────────────────────────────── */
.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

/* Instructor-dashboard style: spacer | centered filters | right actions */
.cm-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.cm-header-spacer  { flex: 1; }
.cm-header-actions { flex: 1; display: flex; justify-content: flex-end; gap: 8px; }

.cm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cm-text);
  margin: 0;
}

@media (max-width: 768px) {
  .cm-title { font-size: 1.2rem; }
  .cm-header-row { flex-wrap: wrap; gap: 10px; }
  .cm-header-spacer { display: none; }
  .cm-header-actions { flex: unset; width: 100%; justify-content: flex-start; }
}

/* ─────────────────────────────────────────
   Filter bar
   Standalone:  .cm-filter-bar (left-aligned, full-width)
   Inside .cm-header-row: gains flex:1 + center alignment automatically
───────────────────────────────────────── */
.cm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

/* When the filter bar sits inside a header-row, center it */
.cm-header-row .cm-filter-bar {
  flex: 1;
  justify-content: center;
  margin-bottom: 0;
}

.cm-filter-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid #ccc;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cm-text-sub);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'Montserrat', Arial, sans-serif;
}
.cm-filter-btn:hover  { border-color: #888; color: #222; }
.cm-filter-btn.active { background: #444; border-color: #444; color: #fff; }

/* green variant */
.cm-filter-btn--green        { border-color: var(--cm-green-border); color: var(--cm-green); }
.cm-filter-btn--green:hover  { background: var(--cm-green-light); }
.cm-filter-btn--green.active { background: var(--cm-green); border-color: var(--cm-green); color: #fff; }

/* yellow variant */
.cm-filter-btn--yellow        { border-color: var(--cm-yellow-border); color: #7a5c00; }
.cm-filter-btn--yellow:hover  { background: var(--cm-yellow-light); }
.cm-filter-btn--yellow.active { background: var(--cm-yellow); border-color: var(--cm-yellow); color: #fff; }

/* blue variant */
.cm-filter-btn--blue        { border-color: #93c5fd; color: #1d6db5; }
.cm-filter-btn--blue:hover  { background: #eff6ff; }
.cm-filter-btn--blue.active { background: #1d6db5; border-color: #1d6db5; color: #fff; }

/* danger variant */
.cm-filter-btn--danger        { border-color: var(--cm-red-border); color: var(--cm-red); }
.cm-filter-btn--danger:hover  { background: var(--cm-red-light); }
.cm-filter-btn--danger.active { background: var(--cm-red); border-color: var(--cm-red); color: #fff; }

/* ─────────────────────────────────────────
   Table
───────────────────────────────────────── */
.cm-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
}

.cm-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.9rem;
}

.cm-table thead tr {
  background: var(--cm-green);
  color: #fff;
}

.cm-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.cm-table thead th:hover { background: var(--cm-green-dark); }

.cm-sort-icon { margin-left: 4px; opacity: 0.6; font-style: normal; }
th.sort-asc .cm-sort-icon,
th.sort-desc .cm-sort-icon { opacity: 1; }

.cm-table tbody tr {
  border-bottom: 1px solid #eee;
  transition: background 0.12s;
}
.cm-table tbody tr.hidden-row { display: none; }
.cm-table tbody tr:last-child  { border-bottom: none; }
.cm-table tbody tr:hover       { background: var(--cm-green-bg); }

.cm-table tbody td {
  padding: 14px 18px;
  vertical-align: middle;
  color: #2c2c2c;
}

/* ─────────────────────────────────────────
   Instructor / user cell
───────────────────────────────────────── */
.cm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e8f5e9;
  color: var(--cm-green);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-user-cell { display: flex; align-items: center; gap: 10px; }
.cm-user-name { font-weight: 600; color: var(--cm-text); }
.cm-user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* optional spacing */
}
/* ─────────────────────────────────────────
   Inline link / sub-text
───────────────────────────────────────── */
.cm-link { font-weight: 600; color: var(--cm-green); text-decoration: none; }
.cm-link:hover { text-decoration: underline; color: var(--cm-green-dark); }

.cm-sub-text { font-size: 0.8rem; color: var(--cm-text-muted); margin-top: 2px; }

/* ─────────────────────────────────────────
   Pills
   Default (.cm-pill)        solid green, like instructor availability tags
   Light variants            .cm-pill--blue/purple/green-light/yellow/red/gray
───────────────────────────────────────── */
.cm-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--cm-green);
  color: #fff;
}

/* Light / semantic variants */
.cm-pill--blue        { background: #e3f2fd; color: #0d3c7a; }
.cm-pill--purple      { background: #f3e5f5; color: #6a1b9a; }
.cm-pill--green-light { background: #e8f5e9; color: #1a5c2a; }
.cm-pill--yellow      { background: #fff8e1; color: #7a5500; }
.cm-pill--red         { background: var(--cm-red-light); color: #7a1a12; }
.cm-pill--gray        { background: #f5f5f5; color: #555; }

/* ─────────────────────────────────────────
   Status badges (larger, bordered)
───────────────────────────────────────── */
.cm-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--cm-radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}
.cm-badge--pending  { background: #fff8e1; color: #7a5500;  border: 1px solid #e8a800; }
.cm-badge--approved { background: #e8f5e9; color: #1a5c2a;  border: 1px solid var(--cm-green); }
.cm-badge--denied   { background: var(--cm-red-light); color: #7a1a12; border: 1px solid var(--cm-red); }
.cm-badge--active   { background: #e8f5e9; color: #1a5c2a;  border: 1px solid var(--cm-green); }
.cm-badge--inactive { background: #f5f5f5; color: #555;     border: 1px solid #ccc; }

/* ─────────────────────────────────────────
   Buttons
───────────────────────────────────────── */
.cm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  border-radius: var(--cm-radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: filter 0.12s, transform 0.1s;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  font-family: 'Montserrat', Arial, sans-serif;
}
.cm-btn:hover { filter: brightness(0.92); transform: translateY(-1px); text-decoration: none; }

.cm-btn--primary { background: var(--cm-green); color: #fff; }
.cm-btn--orange  { background: var(--cm-orange); color: #fff; }
.cm-btn--danger  { background: #fff; color: var(--cm-red); border: 1.5px solid var(--cm-red); }
.cm-btn--outline { background: #fff; color: var(--cm-green); border: 1.5px solid var(--cm-green); }
.cm-btn--gray    { background: #fff; color: #555; border: 1.5px solid #888; }

/* Small variant — matches inline table action buttons */
.cm-btn--sm {
  padding: 6px 14px;
  font-size: 0.82rem;
  border-radius: var(--cm-radius-sm);
}

/* Large submit button with shadow */
.cm-btn--submit {
  background: var(--cm-green);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--cm-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 0 var(--cm-green-deep);
}

/* ─────────────────────────────────────────
   Collapsible form card  (Bootstrap collapse wrapper)
   Usage:
     <div class="cm-collapse-card">
       <div class="cm-collapse-card__trigger" data-bs-toggle="collapse" data-bs-target="#myCollapse">
         Click to expand
       </div>
       <div class="collapse" id="myCollapse">
         <div class="cm-collapse-card__body"> … </div>
       </div>
     </div>
───────────────────────────────────────── */
.cm-collapse-card {
  width: 100%;
  max-width: 680px;
  background: #fff;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
  overflow: hidden;
}

.cm-collapse-card__trigger {
  padding: 14px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--cm-text-muted);
  font-size: 0.85rem;
  border-bottom: 1px solid #f0f0f0;
  user-select: none;
}
.cm-collapse-card__trigger:hover { background: #fafafa; }

.cm-collapse-card__body {
  padding: 20px 24px;
}

/* ─────────────────────────────────────────
   Modern form  (inside collapsible card or standalone)
   Inputs have a neutral border; green activates on focus only.
───────────────────────────────────────── */
.cm-form-modern {
  max-width: 520px;
  margin: 0 auto;
}

.cm-form-modern label {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 4px;
  display: block;
  color: #333;
}

.cm-form-modern input,
.cm-form-modern select,
.cm-form-modern textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1.5px solid #ddd;
  font-size: 0.9rem;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: border 0.15s, box-shadow 0.15s;
}

.cm-form-modern input:focus,
.cm-form-modern select:focus,
.cm-form-modern textarea:focus {
  outline: none;
  border-color: var(--cm-green);
  box-shadow: 0 0 0 2px rgba(18, 127, 40, 0.1);
}

.cm-form-modern .mb-3   { margin-bottom: 14px !important; }
.cm-form-modern .form-check { margin-bottom: 4px; }

.cm-form-modern button[type="submit"] {
  background: var(--cm-green);
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: var(--cm-radius-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: filter 0.12s;
}
.cm-form-modern button[type="submit"]:hover { filter: brightness(0.92); }

/* ─────────────────────────────────────────
   Standard form  (green borders by default)
───────────────────────────────────────── */
.cm-form input:not([type="radio"]):not([type="checkbox"]),
.cm-form textarea,
.cm-form select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--cm-green);
  outline: none;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cm-form input:not([type="radio"]):not([type="checkbox"]):focus,
.cm-form textarea:focus,
.cm-form select:focus {
  box-shadow: 0 0 0 3px rgba(18, 127, 40, 0.15);
  border-color: var(--cm-green);
}

.cm-form__field { margin-bottom: 18px; }
.cm-form__label { font-weight: 600; display: block; margin-bottom: 6px; color: var(--cm-text); font-size: 0.9rem; }
.cm-form__error { color: var(--cm-red); font-size: 0.8rem; margin-top: 4px; }

/* ─────────────────────────────────────────
   File drop zone
───────────────────────────────────────── */
.cm-dropzone {
  border: 2px dashed var(--cm-green);
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: #f4fbf5;
  transition: background 0.2s, border-color 0.2s;
}
.cm-dropzone:hover,
.cm-dropzone.dz-hover { background: #e6f7eb; border-color: var(--cm-green-deep); }

/* ─────────────────────────────────────────
   Empty state
───────────────────────────────────────── */
.cm-empty {
  text-align: center;
  padding: 70px 20px;
  background: #fff;
  border-radius: var(--cm-radius);
  color: var(--cm-text-faint);
}
.cm-empty i { font-size: 3rem; margin-bottom: 12px; display: block; }
.cm-empty p { font-size: 1rem; margin: 0; }

/* ─────────────────────────────────────────
   Utility
───────────────────────────────────────── */
.cm-muted    { font-size: 0.82rem; color: #999; font-style: italic; }

.cm-truncate {
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--cm-text-sub);
  cursor: default;
}
@media (max-width: 768px) {
  .cm-truncate { max-width: 140px; }
}

.cm-timestamp      { white-space: nowrap; color: #444; font-size: 0.88rem; }
.cm-timestamp__sub { font-size: 0.78rem; color: #999; margin-top: 1px; }

/* ─────────────────────────────────────────
   Term status dots
───────────────────────────────────────── */
.cm-term-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cm-term-dot--active   { background: #2ecc71; }
.cm-term-dot--upcoming { background: #1d6db5; }
.cm-term-dot--past     { background: #f0c040; }
.cm-term-dot--inactive { background: #e74c3c; }

/* ─────────────────────────────────────────
   School navigation  (prev ← school → next)
───────────────────────────────────────── */
.cm-school-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}
.cm-school-nav__center { text-align: center; }
.cm-school-nav__title  { margin: 0; font-weight: 700; font-size: 1.4rem; color: var(--cm-text); }

/* Term navigation */
.cm-term-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}
.cm-term-nav__label { font-weight: 600; font-size: 1rem; text-align: center; margin: 0; }

/* Shared outline nav button */
.cm-nav-btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--cm-radius-sm);
  border: 1.5px solid #ccc;
  background: #fff;
  color: var(--cm-text-sub);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.cm-nav-btn:hover           { border-color: #888; color: #222; text-decoration: none; }
.cm-nav-btn:disabled,
.cm-nav-btn[disabled]       { opacity: 0.4; cursor: default; pointer-events: none; }
.cm-nav-btn--green          { border-color: var(--cm-green-border); color: var(--cm-green); }
.cm-nav-btn--green:hover    { background: var(--cm-green-light); }

/* ─────────────────────────────────────────
   Stat cards
───────────────────────────────────────── */
.cm-stat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.cm-stat-card {
  border: 2px solid #000;
  border-radius: 12px;
  padding: 14px 22px;
  background: #f8f9fa;
  min-width: 120px;
  text-align: center;
}
.cm-stat-card__value { font-size: 28px; font-weight: 700; color: var(--cm-text); line-height: 1; }
.cm-stat-card__label { font-size: 13px; color: var(--cm-text-sub); margin-top: 4px; }

/* ─────────────────────────────────────────
   Search bar
───────────────────────────────────────── */
.cm-search-bar { max-width: 800px; margin: 0 auto 24px; }
.cm-search-bar__inner { display: flex; gap: 8px; }
.cm-search-bar input[type="text"] {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--cm-radius-sm);
  border: 1.5px solid #ddd;
  font-size: 0.9rem;
  font-family: 'Montserrat', Arial, sans-serif;
  transition: border-color 0.15s;
}
.cm-search-bar input[type="text"]:focus {
  outline: none;
  border-color: var(--cm-green);
  box-shadow: 0 0 0 2px rgba(18, 127, 40, 0.1);
}

/* ─────────────────────────────────────────
   Chat thread items
───────────────────────────────────────── */
.cm-chat-list { display: flex; flex-direction: column; gap: 12px; }

.cm-chat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  box-shadow: var(--cm-shadow);
  transition: background 0.15s;
}
.cm-chat-item:hover { background: var(--cm-green-bg); color: #333; text-decoration: none; }

.cm-chat-item__left    { flex: 1; }
.cm-chat-item__name    { font-weight: 700; font-size: 1rem; color: var(--cm-green); }
.cm-chat-item__meta    { font-size: 13px; color: #666; margin-top: 4px; }
.cm-chat-item__preview { text-align: right; max-width: 40%; font-size: 13px; color: var(--cm-text-sub); }
.cm-chat-item__label   { font-size: 11px; color: var(--cm-text-muted); font-weight: normal; }

.cm-unread-badge {
  display: inline-block;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* ─────────────────────────────────────────
   Community post card
───────────────────────────────────────── */
.cm-post-card {
  display: block;
  background: #fffdee;
  border: 2px solid #000;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 22px;
  text-decoration: none;
  color: #000;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 4px 4px 0 #000;
}
.cm-post-card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 #000; color: #000; text-decoration: none; }

.cm-post-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.cm-post-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%; border: 2px solid #000; background: #fff; object-fit: cover;
}
.cm-post-card__author { font-size: 18px; line-height: 1.1; }
.cm-post-card__time   { font-size: 13px; color: #6c757d; }
.cm-post-card__title  { font-size: 21px; margin-bottom: 10px; color: #000; }
.cm-post-card__body   { display: flex; justify-content: space-between; gap: 16px; }
.cm-post-card__text   { flex: 1; }
.cm-post-card__image  {
  width: 150px; height: 150px;
  object-fit: cover; border-radius: 12px;
  border: 2px solid #000; box-shadow: 2px 2px 0 #000;
}
.cm-post-card__actions {
  display: flex; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--cm-border);
}

.cm-post-badge {
  display: inline-block;
  background: #7cd67c;
  border: 2px solid #000;
  padding: 4px 10px;
  border-radius: var(--cm-radius-sm);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 2px 2px 0 #000;
}

/* ─────────────────────────────────────────
   Note card
───────────────────────────────────────── */
.cm-note-list { display: flex; flex-direction: column; gap: 12px; }
.cm-note-card {
  background: #fff;
  border: 1px solid #e2e8e4;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.cm-note-card__body   { font-size: 14px; color: #222; line-height: 1.6; margin: 0; }
.cm-note-card__footer { margin-top: 10px; display: flex; gap: 16px; font-size: 12px; color: #999; }

/* ─────────────────────────────────────────
   Back navigation
───────────────────────────────────────── */
.cm-back       { color: var(--cm-green); text-decoration: none; font-size: 20px; line-height: 1; }
.cm-back:hover { color: var(--cm-green-dark); text-decoration: none; }

/* ─────────────────────────────────────────
   Star rating
───────────────────────────────────────── */
.cm-star         { font-size: 16px; }
.cm-star--filled { color: #f5a623; }
.cm-star--empty  { color: #ddd; }

/* ─────────────────────────────────────────
   Badge legend row
───────────────────────────────────────── */
.cm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  margin-bottom: 16px;
  color: var(--cm-text-sub);
}