/**

 * RDG Course Management Admin Screen Stylesheet

 *

 * Purpose: Styling for the RDG Course Management admin interface

 * Includes: Add form, courses table, action buttons, edit modal

 *

 * @package VantageIt

 * @since 2026-07-01

 */

/* ===========================================================================================

   MAIN CONTAINER

   =========================================================================================== */

.rdg-cm-container {

  padding: 20px;

  background-color: #ffffff;

  border-radius: 8px;

  position: relative;

  width: 100%;

  box-sizing: border-box;

  /* Ensure the container stretches to fit all content — prevents table sliding under footer */

  overflow: visible;

  clear: both;

}

/* ===========================================================================================

   BREADCRUMBS

   =========================================================================================== */

.rdg-breadcrumbs {

  padding: 12px 0;

  margin-bottom: 20px;

  font-size: 13px;

  display: flex;

  align-items: center;

  gap: 8px;

}

.rdg-breadcrumb-link {

  color: #007bff;

  text-decoration: none;

  font-weight: 500;

}

.rdg-breadcrumb-link:hover {

  color: #0056b3;

  text-decoration: underline;

}

.rdg-breadcrumb-separator {

  color: #a0aec0;

}

.rdg-breadcrumb-current {

  color: #718096;

}

/* ===========================================================================================

   HEADER

   =========================================================================================== */

.rdg-cm-header {

  margin: 25px 0 15px 0;

}

.rdg-cm-header h2 {

  margin: 0;

  font-size: 24px;

  color: #1a202c;

  font-weight: 600;

}

.rdg-cm-header h3 {

  margin: 0;

  font-size: 18px;

  color: #1a202c;

  font-weight: 600;

}

/* ===========================================================================================

   FORM (Add + Edit share these classes)

   =========================================================================================== */

.rdg-cm-form {

  max-width: 640px;

}

.rdg-cm-form-group {

  margin-bottom: 18px;

  display: flex;

  flex-direction: column;

}

.rdg-cm-form-group label {

  margin-bottom: 6px;

  font-weight: 500;

  font-size: 14px;

  color: #2d3748;

}

.rdg-cm-form-input {

  padding: 10px 12px !important;

  border: 1px solid #c2cbd8 !important;

  border-radius: 6px !important;

  font-size: 14px !important;

  background-color: #ffffff !important;

  color: #2d3748 !important;

  width: 100% !important;

  box-sizing: border-box !important;

  transition: all 0.2s ease !important;

}

.rdg-cm-form-input:focus {

  outline: none !important;

  border-color: #3182ce !important;

  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1) !important;

}

textarea.rdg-cm-form-input {

  resize: vertical;

  min-height: 90px;

}

/* Two-column layout for the Add form (Client | Purpose, Course Name | Summary) */

.rdg-cm-form-grid {

  max-width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 32px;

  align-items: start;

}

.rdg-cm-form-grid .rdg-alert-error,

.rdg-cm-form-grid .rdg-cm-btn-submit {

  grid-column: 1 / -1;

}

.rdg-cm-form-grid .rdg-cm-btn-submit {

  justify-self: end;

  margin-top: 8px;

}

/* Filter bar above the Existing Courses table */

.rdg-cm-filter-bar {

  margin-bottom: 16px;

}

.rdg-cm-filter-select {

  max-width: 320px;

}

/* ===========================================================================================

   TABLE

   =========================================================================================== */

.rdg-cm-table-wrapper {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  margin-bottom: 40px;

  border-radius: 6px;

  border: 1px solid #e2e8f0;

  width: 100%;

  box-sizing: border-box;

}

.rdg-cm-table {

  width: 100%;

  border-collapse: collapse;

  background-color: #ffffff;

}

.rdg-cm-table thead {

  background-color: #5b5b5b;

  border-bottom: 2px solid #e2e8f0;

}

.rdg-cm-table thead th {

  padding: 15px;

  text-align: left;

  font-weight: bold;

  color: #ffffff;

  font-size: 13px;

  letter-spacing: 0.5px;

}

.rdg-cm-table tbody td {

  padding: 15px;

  border-bottom: 1px solid #e2e8f0;

  font-size: 14px;

  color: #2d3748;

}

.rdg-cm-table tbody tr:hover {

  background-color: #e9ecef;

}

.rdg-cm-table tbody tr:last-child td {

  border-bottom: none;

}

.rdg-cm-no-results {

  text-align: center;

  padding: 40px !important;

  color: #a0aec0;

}

/* ===========================================================================================

   ACTION BUTTONS (edit / delete)

   =========================================================================================== */

.rdg-cm-btn-edit,

.rdg-cm-btn-delete {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  font-size: 16px !important;

  color: #718096 !important;

  padding: 5px !important;

  margin: 0 3px !important;

  transition: color 0.2s ease !important;

  line-height: 1 !important;

}

.rdg-cm-btn-edit:hover {

  color: #3182ce !important;

}

.rdg-cm-btn-delete:hover {

  color: #e53e3e !important;

}

/* ===========================================================================================

   SUBMIT / CANCEL BUTTONS

   =========================================================================================== */

.rdg-cm-btn-submit,

.rdg-cm-btn-cancel {

  padding: 10px 16px !important;

  font-size: 14px !important;

  font-weight: 500 !important;

  border: none !important;

  border-radius: 6px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  min-width: 100px !important;

}

.rdg-cm-btn-submit {

  background-color: #007bff !important;

  color: #ffffff !important;

}

.rdg-cm-btn-submit:hover {

  background-color: #0056b3 !important;

}

.rdg-cm-btn-cancel {

  background-color: #e2e8f0 !important;

  color: #2d3748 !important;

}

.rdg-cm-btn-cancel:hover {

  background-color: #cbd5e0 !important;

}

/* ===========================================================================================

   ALERT MESSAGES

   =========================================================================================== */

.rdg-alert-error {

  background-color: #fed7d7;

  color: #742a2a;

  padding: 12px;

  border-radius: 4px;

  border-left: 4px solid #f56565;

}

.rdg-alert-warning {

  background-color: #feebc8;

  color: #7c2d12;

  padding: 12px;

  border-radius: 4px;

  border-left: 4px solid #ed8936;

  margin: 20px 0;

}

/* ===========================================================================================

   MODAL (edit) - shown by toggling .rdg-cm-modal-open (set in rdg-course-management.js)

   =========================================================================================== */

.rdg-cm-modal-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 999;

}

.rdg-cm-modal-overlay.rdg-cm-modal-open {

  display: block;

}

.rdg-cm-modal {

  display: none;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 1000;

  width: 90%;

  max-width: 520px;

}

.rdg-cm-modal.rdg-cm-modal-open {

  display: block;

}

.rdg-cm-modal-content {

  background-color: #ffffff;

  border-radius: 12px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

  display: flex;

  flex-direction: column;

  max-height: 90vh;

  overflow-y: auto;

}

.rdg-cm-modal-header {

  padding: 20px 24px;

  border-bottom: 1px solid #e2e8f0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: #f7fafc;

  border-radius: 12px 12px 0 0;

}

.rdg-cm-modal-header h3 {

  margin: 0;

  font-size: 20px;

  font-weight: 600;

  color: #1a202c;

}

.rdg-cm-modal-close {

  background: none !important;

  border: none !important;

  font-size: 28px !important;

  cursor: pointer !important;

  color: #718096 !important;

  padding: 0 !important;

  line-height: 1 !important;

}

.rdg-cm-modal-close:hover {

  color: #2d3748 !important;

}

.rdg-cm-modal .rdg-cm-form {

  padding: 24px;

  max-width: none;

}

.rdg-cm-modal-footer {

  padding: 16px 24px;

  border-top: 1px solid #e2e8f0;

  display: flex;

  gap: 10px;

  justify-content: flex-end;

  background-color: #f7fafc;

  border-radius: 0 0 12px 12px;

}

/* ===========================================================================================

   RESPONSIVE

   =========================================================================================== */

@media (max-width: 768px) {

  .rdg-cm-container {

    padding: 15px;

  }

  .rdg-cm-form {

    max-width: 100%;

  }

  .rdg-cm-form-grid {

    grid-template-columns: 1fr;

  }

  /* Responsive table: hide header, show each cell as a labelled row */

  .rdg-cm-table thead {

    display: none;

  }

  .rdg-cm-table tbody tr {

    display: block;

    margin-bottom: 12px;

    border: 1px solid #e2e8f0;

    border-radius: 6px;

    padding: 6px 10px;

  }

  .rdg-cm-table tbody td {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 8px 4px;

    border-bottom: 1px solid #f0f0f0;

    font-size: 13px;

  }

  .rdg-cm-table tbody td:last-child {

    border-bottom: none;

  }

  .rdg-cm-table tbody td::before {

    content: attr(data-label);

    font-weight: 600;

    color: #718096;

    font-size: 12px;

    margin-right: 10px;

    white-space: nowrap;

  }

  .rdg-cm-modal-footer {

    flex-direction: column-reverse;

  }

  .rdg-cm-btn-submit,

  .rdg-cm-btn-cancel {

    width: 100% !important;

  }

}