/* ==========================================================================
   JCTGBTG Attendance Suite Global UI v1.4.9
   Clean Apple-style system for cards, filters, tables, buttons, and pills.
   ========================================================================== */

:root{
  --jct-bg:#ffffff;
  --jct-surface:#ffffff;
  --jct-surface-soft:#fafafa;
  --jct-border:#eeeeee;
  --jct-border-strong:#dddddd;
  --jct-line:#ececec;
  --jct-line-soft:#f2f2f2;
  --jct-text:#111111;
  --jct-muted:#777777;
  --jct-muted-2:#666666;
  --jct-shadow:0 8px 24px rgba(0,0,0,.08);
  --jct-radius:16px;
  --jct-radius-sm:10px;
  --jct-font:Arial, sans-serif;

  --jct-green-bg:#eefbf3;
  --jct-green:#1f7a45;
  --jct-orange-bg:#fff4e5;
  --jct-orange:#a15c00;
  --jct-red-bg:#fff2f2;
  --jct-red:#b42318;
  --jct-blue-bg:#f2f5ff;
  --jct-blue:#3751b5;
  --jct-grey-bg:#f5f5f5;
  --jct-grey:#555555;
}

/* Shared Wrappers / Cards */
.jctgbtg-wrap,
.jctgbtg-rd-wrap,
.jctgbtg-mm-wrap,
.jctgbtg-dir-wrap,
.jctgbtg-tracker-wrap,
.jct-suite-wrap{
  font-family:var(--jct-font);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.jctgbtg-card,
.jctgbtg-rd-card,
.jctgbtg-mm-card,
.jctgbtg-dir-card,
.jctgbtg-tracker-card,
.ff-monthly-report-card,
.jct-card{
  padding:20px;
  border:1px solid var(--jct-border);
  border-radius:var(--jct-radius);
  background:var(--jct-surface);
  box-shadow:var(--jct-shadow);
  box-sizing:border-box;
}

.jctgbtg-title,
.jctgbtg-rd-title,
.jctgbtg-mm-title,
.jctgbtg-dir-title,
.jctgbtg-tracker-title,
.jct-title{
  font-size:24px;
  line-height:1.2;
  font-weight:700;
  color:var(--jct-text);
}

.jctgbtg-sub,
.jctgbtg-rd-topline,
.jctgbtg-mm-sub,
.jctgbtg-dir-sub,
.jctgbtg-tracker-sub,
.jct-sub{
  font-size:13px;
  color:var(--jct-muted);
  margin-top:4px;
}

/* Forms / Filters */
.jctgbtg-filter-row,
.jctgbtg-rd-filter,
.jctgbtg-mm-filter,
.jctgbtg-dir-filter,
.jctgbtg-tracker-actions,
.jct-filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:end;
}

.jctgbtg-col,
.jctgbtg-rd-col,
.jctgbtg-mm-field,
.jctgbtg-dir-field,
.jct-filter-col{
  min-width:150px;
  flex:1;
  box-sizing:border-box;
}

.jctgbtg-label,
.jctgbtg-rd-label,
.jctgbtg-mm-label,
.jctgbtg-dir-label,
.jct-label{
  display:block;
  font-size:12px;
  color:var(--jct-muted-2);
  margin-bottom:6px;
  font-weight:700;
}

.jctgbtg-input,
.jctgbtg-select,
.jctgbtg-rd-input,
.jctgbtg-mm-input,
.jctgbtg-mm-select,
.jctgbtg-dir-input,
.jctgbtg-dir-select,
.jctgbtg-control,
.jct-control,
.ff-control,
.jct-input,
.jct-select{
  width:100%;
  height:42px;
  padding:0 12px;
  border:1px solid var(--jct-border-strong);
  border-radius:var(--jct-radius-sm);
  background:#fff!important;
  color:var(--jct-text);
  box-shadow:none;
  box-sizing:border-box;
  font-size:14px;
  line-height:normal;
  font-family:inherit;
}

select.jctgbtg-input,
select.jctgbtg-select,
select.jctgbtg-rd-input,
select.jctgbtg-mm-select,
select.jctgbtg-dir-select,
select.jctgbtg-control,
select.ff-control,
select.jct-control,
select.jct-select{
  padding-right:38px;
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23666' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:12px 12px!important;
}

select::-ms-expand{display:none;}

/* Buttons */
.jctgbtg-btn,
.jctgbtg-rd-btn,
.jctgbtg-mm-btn,
.jctgbtg-dir-btn,
.jctgbtg-btn-outline,
.jct-btn,
.ff-btn,
.ff-btn-outline,
button.ff-btn-outline,
a.ff-btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  height:42px;
  padding:0 16px;
  border:1px solid var(--jct-border-strong);
  border-radius:var(--jct-radius-sm);
  background:#fff;
  color:#333;
  font-size:14px;
  font-weight:500;
  line-height:normal;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
  font-family:inherit;
  appearance:none;
  -webkit-appearance:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

.jctgbtg-btn,
.jctgbtg-mm-btn-dark,
.jctgbtg-dir-btn-dark,
.jct-btn-dark{
  background:#111;
  color:#fff;
  border-color:#111;
}

.jctgbtg-btn-outline,
.jct-btn-outline{
  background:#fff;
  color:#333;
  border-color:var(--jct-border-strong);
}

.jctgbtg-mm-btn-danger,
.jct-btn-danger{
  color:var(--jct-red);
}

.jctgbtg-btn:hover,
.jctgbtg-rd-btn:hover,
.jctgbtg-mm-btn:hover,
.jctgbtg-dir-btn:hover,
.jctgbtg-btn-outline:hover,
.jct-btn:hover,
.ff-btn:hover,
.ff-btn-outline:hover{
  opacity:.86;
}

button:disabled,
.jctgbtg-btn[disabled],
.jctgbtg-btn-outline[disabled]{
  opacity:.55;
  cursor:not-allowed;
}

/* Stats */
.jctgbtg-grid,
.jctgbtg-rd-grid,
.jctgbtg-dir-grid,
.jctgbtg-tracker-grid,
.jct-stat-grid{
  display:grid;
  gap:14px;
}

.jctgbtg-grid{grid-template-columns:repeat(8,minmax(0,1fr));margin-top:18px;}
.jctgbtg-dir-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.jctgbtg-tracker-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;}

.jctgbtg-stat,
.jctgbtg-dir-stat,
.jctgbtg-tracker-stat,
.jct-stat{
  padding:14px;
  border:1px solid var(--jct-border);
  border-radius:14px;
  background:var(--jct-surface-soft);
  box-sizing:border-box;
}

.jctgbtg-stat-label,
.jctgbtg-dir-stat-label,
.jctgbtg-tracker-label,
.jct-stat-label{
  font-size:12px;
  color:var(--jct-muted-2);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.jctgbtg-stat-value,
.jctgbtg-dir-stat-value,
.jctgbtg-tracker-value,
.jct-stat-value{
  font-size:22px;
  font-weight:700;
  margin-top:6px;
  color:var(--jct-text);
}

/* Bordered Table System - v1.4.9
   Standardized for better readability and easier scanning during operations. */
.jct-table-wrap,
.jctgbtg-table-wrap,
.jctgbtg-mm-table-wrap,
.jctgbtg-dir-table-wrap,
.ff-tracker-table-wrap{
  overflow-x:auto;
  padding:0;
  border:1px solid var(--jct-border-strong);
  border-radius:12px;
  background:#fff;
}

.jct-table,
.jctgbtg-table,
.jctgbtg-rd-table,
.jctgbtg-mm-table,
.jctgbtg-dir-table,
.jctgbtg-tracker-table,
.ff-tracker-table,
.d6-table{
  width:100%;
  border-collapse:collapse;
  border:none;
  margin-top:0;
  background:#fff;
}

.jct-table thead tr,
.jctgbtg-table thead tr,
.jctgbtg-rd-table thead tr,
.jctgbtg-mm-table thead tr,
.jctgbtg-dir-table thead tr,
.jctgbtg-tracker-table thead tr,
.ff-tracker-table thead tr,
.d6-table thead tr{
  border-bottom:1px solid var(--jct-border-strong);
}

.jct-table th,
.jctgbtg-table th,
.jctgbtg-rd-table th,
.jctgbtg-mm-table th,
.jctgbtg-dir-table th,
.jctgbtg-tracker-table th,
.ff-tracker-table th,
.d6-table th{
  text-align:left;
  padding:12px 10px;
  font-size:12px;
  color:#555;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  border:1px solid var(--jct-border-strong)!important;
  background:#f7f7f7;
  white-space:nowrap;
}

.jct-table tbody tr,
.jctgbtg-table tbody tr,
.jctgbtg-rd-table tbody tr,
.jctgbtg-mm-table tbody tr,
.jctgbtg-dir-table tbody tr,
.jctgbtg-tracker-table tbody tr,
.ff-tracker-table tbody tr,
.d6-table tbody tr{
  border-bottom:1px solid var(--jct-border-strong);
}

.jct-table td,
.jctgbtg-table td,
.jctgbtg-rd-table td,
.jctgbtg-mm-table td,
.jctgbtg-dir-table td,
.jctgbtg-tracker-table td,
.ff-tracker-table td,
.d6-table td{
  text-align:left;
  padding:12px 10px;
  border:1px solid var(--jct-border-strong)!important;
  font-size:14px;
  color:var(--jct-text);
  vertical-align:middle;
  background:#fff;
}

.jct-table tbody tr:nth-child(even) td,
.jctgbtg-table tbody tr:nth-child(even) td,
.jctgbtg-rd-table tbody tr:nth-child(even) td,
.jctgbtg-mm-table tbody tr:nth-child(even) td,
.jctgbtg-dir-table tbody tr:nth-child(even) td,
.jctgbtg-tracker-table tbody tr:nth-child(even) td,
.ff-tracker-table tbody tr:nth-child(even) td,
.d6-table tbody tr:nth-child(even) td{
  background:#fcfcfc;
}

.jct-table tbody tr:hover td,
.jctgbtg-table tbody tr:hover td,
.jctgbtg-rd-table tbody tr:hover td,
.jctgbtg-mm-table tbody tr:hover td,
.jctgbtg-dir-table tbody tr:hover td,
.jctgbtg-tracker-table tbody tr:hover td,
.ff-tracker-table tbody tr:hover td,
.d6-table tbody tr:hover td{
  background:#f5f5f5;
}

/* Make old inline monthly report tables more readable too */
.ff-monthly-report-card table{
  width:100%;
  border-collapse:collapse!important;
  border:1px solid var(--jct-border-strong)!important;
  background:#fff;
}

.ff-monthly-report-card table th{
  padding:12px 10px!important;
  border:1px solid var(--jct-border-strong)!important;
  background:#f7f7f7!important;
  color:#555!important;
  font-size:12px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.05em!important;
}

.ff-monthly-report-card table td{
  padding:12px 10px!important;
  border:1px solid var(--jct-border-strong)!important;
  background:#fff;
  font-size:14px;
  color:var(--jct-text);
}

.ff-monthly-report-card table tbody tr:nth-child(even) td{
  background:#fcfcfc;
}

.ff-monthly-report-card table tbody tr:hover td{
  background:#f5f5f5;
}


/* Pills */
.jctgbtg-pill,
.jctgbtg-mm-pill,
.jctgbtg-dir-pill,
.jctgbtg-pill-checked,
.jctgbtg-pill-pending,
.jctgbtg-pill-worker,
.jctgbtg-pill-member,
.jctgbtg-pill-visitor,
.jctgbtg-mm-pending,
.jctgbtg-mm-approved,
.jctgbtg-mm-rejected,
.jctgbtg-pill-ok,
.jctgbtg-pill-missing,
.jctgbtg-pill-progress,
.ff-pill-ok,
.ff-pill-missing,
.ff-pill-progress,
.jct-pill{
  display:inline-block;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1.25;
  white-space:nowrap;
}

.jctgbtg-pill-checked,
.jctgbtg-mm-approved,
.jctgbtg-dir-pill,
.jctgbtg-pill-ok,
.ff-pill-ok,
.jct-pill-success{
  background:var(--jct-green-bg);
  color:var(--jct-green);
}

.jctgbtg-pill-pending,
.jctgbtg-mm-pending,
.jctgbtg-pill-missing,
.ff-pill-missing,
.jct-pill-warning{
  background:var(--jct-orange-bg);
  color:var(--jct-orange);
}

.jctgbtg-mm-rejected,
.jct-pill-danger{
  background:var(--jct-red-bg);
  color:var(--jct-red);
}

.jctgbtg-pill-worker,
.jct-pill-blue{
  background:var(--jct-blue-bg);
  color:var(--jct-blue);
}

.jctgbtg-pill-member,
.jctgbtg-pill-progress,
.ff-pill-progress,
.jct-pill-muted{
  background:var(--jct-grey-bg);
  color:var(--jct-grey);
}

.jctgbtg-pill-visitor{
  background:#fff6ea;
  color:#a75a00;
}

/* Utility */
.jctgbtg-muted,
.jct-muted{
  color:var(--jct-muted);
  font-size:12px;
}

.jctgbtg-section-title,
.jct-section-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
  color:var(--jct-text);
}

@media(max-width:1100px){
  .jctgbtg-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:900px){
  .jctgbtg-dir-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:768px){
  .jctgbtg-grid{grid-template-columns:1fr 1fr;}
  .jctgbtg-col,
  .jctgbtg-rd-col,
  .jctgbtg-mm-field,
  .jctgbtg-dir-field,
  .jct-filter-col{min-width:100%;}

  .jct-table th,
  .jctgbtg-table th,
  .jctgbtg-rd-table th,
  .jctgbtg-mm-table th,
  .jctgbtg-dir-table th,
  .jctgbtg-tracker-table th,
  .ff-tracker-table th,
  .d6-table th,
  .jct-table td,
  .jctgbtg-table td,
  .jctgbtg-rd-table td,
  .jctgbtg-mm-table td,
  .jctgbtg-dir-table td,
  .jctgbtg-tracker-table td,
  .ff-tracker-table td,
  .d6-table td{
    font-size:13px;
  }
}

@media(max-width:540px){
  .jctgbtg-grid,
  .jctgbtg-dir-grid,
  .jctgbtg-tracker-grid{grid-template-columns:1fr;}
}