.tcms-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.tcms-form-group {
    margin-bottom: 15px;
}

.tcms-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.tcms-form-group input,
.tcms-form-group select,
.tcms-form-group textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.tcms-btn {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.tcms-btn:hover {
    background-color: #0056b3;
}

.tcms-alert {
    padding: 15px;
    margin-bottom: 20px;
}

.tcms-alert-success {
    background-color: #d4edda;
    color: #155724;
}


/* Student Profile - Tabs */
.tcms-profile-tabs {
  gap: .5rem;
}
.tcms-profile-tabs .nav-link {
  border-radius: .75rem;
  padding: .6rem .9rem;
  font-weight: 600;
}
.tcms-profile-tabs .nav-link.active {
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.08);
}

/* Membership expiry colors */
.tcms-expiry-green { color: #198754; font-weight: 700; }
.tcms-expiry-orange { color: #fd7e14; font-weight: 700; }
.tcms-expiry-red { color: #dc3545; font-weight: 700; }


/* TCMS Training Calendar (monthly grid) */
.table.tcms-calendar { table-layout: fixed; }
.tcms-calendar th { font-weight: 600; }
.tcms-cal-empty { background: #fafafa; height: 110px; }
.tcms-cal-cell { vertical-align: top; height: 110px; padding: 8px; }
.tcms-cal-day { font-weight: 700; margin-bottom: 6px; }
.tcms-cal-times { display: flex; flex-wrap: wrap; gap: 6px; }
.tcms-cal-badge { font-weight: 600; }


/* Holiday badge in calendar */
.tcms-cal-holiday{margin-top:4px;line-height:1.1}
.tcms-holiday-desc{display:block;margin-top:2px;color:#6c757d}

/* ------------------------------------------------------------
 * Instructor Dashboard modal compatibility
 * ----------------------------------------------------------*/
.tcms-instructor-dashboard .modal { z-index: 1055; }
.tcms-instructor-dashboard .modal-dialog { pointer-events: auto; }
.modal-backdrop { z-index: 1050; }

/* If a theme sets pointer-events:none somewhere, force clickability */
.tcms-instructor-dashboard .modal,
.tcms-instructor-dashboard .modal * { pointer-events: auto; }


/* Student Profile - Calendar badges */
.tcms-calendar .tcms-cal-day{font-weight:900;}
.tcms-calendar .tcms-cal-badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:.78rem;font-weight:800;margin-top:6px;}
.tcms-calendar .tcms-badge-holiday{background:#dc3545;color:#fff;}
.tcms-calendar .tcms-badge-train{background:#0d6efd;color:#fff;}

@media (max-width: 600px){
  .tcms-container{padding:12px;}
  .tcms-btn{width:100%;}
  .tcms-profile-tabs{flex-wrap:wrap;}
  .tcms-calendar-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table.tcms-calendar{min-width:650px;}
  .tcms-cal-cell,.tcms-cal-empty{height:auto;min-height:90px;}
}

/* Instructor Dashboard: keep action buttons usable on narrow screens */
.tcms-instructor-dashboard .tcms-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  align-items:center;
}
.tcms-instructor-dashboard .tcms-action-buttons .btn{margin:0;}

/* ------------------------------------------------------------
 * Global mobile responsiveness helpers
 *
 * TCMS renders a mix of Bootstrap markup plus legacy admin tables.
 * On phones, wide tables and dense button rows break layouts.
 * These helpers keep the UI usable without changing templates.
 * ----------------------------------------------------------*/

/* Auto table scroller wrapper (injected by JS on small screens) */
.tcms-table-responsive-auto{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.tcms-table-responsive-auto > table{
  margin-bottom:0;
}

/* Action button rows (admin + frontend) */
.tcms-action-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
}
.tcms-action-buttons .btn,
.tcms-action-buttons .button{ margin:0; }

/* Make long select2 / inputs not overflow */
.tcms-instructor-dashboard .select2,
.tcms-instructor-dashboard .select2-container,
.tcms-container .select2,
.tcms-container .select2-container{
  max-width:100% !important;
}

@media (max-width: 768px){
  /* Reduce padding so pages fit on small screens */
  .tcms-instructor-dashboard,
  .tcms-container{
    padding-left:12px;
    padding-right:12px;
  }

  /* Many legacy screens use fixed-ish column widths; force stack on phones */
  .tcms-instructor-dashboard .col-6,
  .tcms-instructor-dashboard .col-4,
  .tcms-instructor-dashboard .col-3,
  .tcms-instructor-dashboard .col-2,
  .tcms-container .col-6,
  .tcms-container .col-4,
  .tcms-container .col-3,
  .tcms-container .col-2{
    flex: 0 0 100%;
    max-width:100%;
  }

  /* Modals: use more of the viewport width */
  .tcms-instructor-dashboard .modal-dialog,
  .tcms-container .modal-dialog{
    max-width: none;
    margin: .5rem;
  }
  .tcms-instructor-dashboard .modal-body,
  .tcms-container .modal-body{
    padding: 1rem;
  }
}

@media (max-width: 576px){
  /* Buttons: allow wrapping without squeezing text */
  .tcms-instructor-dashboard .btn,
  .tcms-container .btn{
    white-space: normal;
  }
  /* Ensure modals are scrollable on very small screens */
  .tcms-instructor-dashboard .modal-dialog,
  .tcms-container .modal-dialog{
    margin: .25rem;
  }
}

/* Instructor Dashboard - Personal Plans form layout fixes */
.tcms-instructor-dashboard .tcms-personal-plan-form select,
.tcms-instructor-dashboard .tcms-personal-plan-form input[type="text"],
.tcms-instructor-dashboard .tcms-personal-plan-form input[type="number"],
.tcms-instructor-dashboard .tcms-personal-plan-form input[type="date"],
.tcms-instructor-dashboard .tcms-personal-plan-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Match admin page goal textarea sizing on Instructor Dashboard */
.tcms-instructor-dashboard .tcms-personal-plan-form textarea.tcms-pp-goals {
    min-height: 220px !important;
    resize: vertical;
}

.tcms-instructor-dashboard .wrap select.form-control,
.tcms-instructor-dashboard .wrap input.form-control {
    padding: 6px 10px !important;
    height: auto !important;
    min-height: 38px;
    font-size: 14px;
    line-height: 1.3;
}

.tcms-instructor-dashboard .wrap textarea.form-control {
    min-height: 140px !important;
    padding: 10px !important;
    font-size: 14px;
    line-height: 1.4;
    resize: vertical;
}

.tcms-instructor-dashboard .wrap form .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    margin-right: 10px;
    margin-top: 10px;
}

.tcms-instructor-dashboard .wrap form .btn:last-child {
    margin-right: 0;
}