/* RSST global form clarity, filter consistency, and mobile responsiveness. */
:root{
  --rsst-control-text:var(--ink,#203244);
  --rsst-control-label:var(--ink,#203244);
  --rsst-control-placeholder:#788a99;
  --rsst-control-disabled:#98a6b2;
  --rsst-control-surface:var(--surface,#fff);
  --rsst-control-disabled-surface:#f1f5f8;
  --rsst-filter-surface:#f6fafc;
  --rsst-filter-border:#d4e5ef;
  --rsst-required:#b4233b;
}

/* Compatible hooks for the project's current or future variable-driven dark mode. */
html[data-theme="dark"],body[data-theme="dark"],body.dark-mode,body.theme-dark,.theme-dark{
  --rsst-control-text:#eef5fa;
  --rsst-control-label:#f4f7fa;
  --rsst-control-placeholder:#98a8b6;
  --rsst-control-disabled:#73818d;
  --rsst-control-surface:#1d2a35;
  --rsst-control-disabled-surface:#25323d;
  --rsst-filter-surface:#18242e;
  --rsst-filter-border:#344552;
}

html,body{max-width:100%;overflow-x:hidden}
input,select,textarea,button{min-width:0;max-width:100%}
label,.form-grid>*,.modal-form>*,.stack-form>*,.inline-form>*{min-width:0}
label{color:var(--rsst-control-label)}

/* Empty controls are muted; actual entered and selected values stay prominent. */
input,select,textarea,
.rsst-custom-select-button,
.rsst-custom-select-value{
  color:var(--rsst-control-text)!important;
  opacity:1!important;
}
input::placeholder,
textarea::placeholder,
.rsst-custom-select.is-placeholder .rsst-custom-select-value{
  color:var(--rsst-control-placeholder)!important;
  opacity:1!important;
}
select.is-placeholder,
select.is-placeholder:focus,
input.is-empty-value[type="date"],
input.is-empty-value[type="time"],
input.is-empty-value[type="datetime-local"],
input.is-empty-value[type="month"],
input.is-empty-value[type="week"]{
  color:var(--rsst-control-placeholder)!important;
}
select option{color:var(--rsst-control-text);background:var(--rsst-control-surface)}
select option.is-placeholder-option{color:var(--rsst-control-placeholder)}
input:disabled,select:disabled,textarea:disabled,
input[readonly],textarea[readonly],
.rsst-custom-select.is-disabled .rsst-custom-select-button,
.rsst-custom-select-button:disabled{
  color:var(--rsst-control-disabled)!important;
  background:var(--rsst-control-disabled-surface)!important;
  opacity:1!important;
}
.rsst-custom-select-option.is-placeholder:not(.is-selected){color:var(--rsst-control-placeholder)!important}
.rsst-custom-select:not(.is-placeholder):not(.is-disabled) .rsst-custom-select-value,
.rsst-custom-select:not(.is-placeholder):not(.is-disabled) .rsst-custom-select-button{
  color:var(--rsst-control-text)!important;
}
.required-mark{color:var(--rsst-required)!important}

[data-person-name="true"],[data-mobile-number="true"],input[type="email"]{font-variant-numeric:normal}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:#bd3248!important;box-shadow:0 0 0 3px rgba(189,50,72,.12)!important}

/* One reusable layout for Search | Filter | Reset across module pages. */
.app-main .live-filter-bar,
.app-main .module-filter.live-filter-bar{
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) minmax(220px,290px) auto!important;
  align-items:end!important;
  gap:12px!important;
  width:100%;
  max-width:100%;
  padding:15px 16px!important;
  margin:0 0 18px!important;
  border:1px solid var(--rsst-filter-border)!important;
  border-radius:14px!important;
  background:var(--rsst-filter-surface)!important;
}
.app-main .live-filter-bar.live-filter-single,
.app-main .module-filter.live-filter-bar.live-filter-single{
  grid-template-columns:minmax(280px,1fr) auto!important;
}
.app-main .live-filter-bar>label,
.app-main .module-filter.live-filter-bar>label{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.app-main .live-filter-bar .filter-search-field,
.app-main .module-filter.live-filter-bar .filter-search-field{
  grid-column:auto!important;
  min-width:0!important;
}
.app-main .live-filter-bar input,
.app-main .live-filter-bar select,
.app-main .live-filter-bar .rsst-custom-select-button,
.app-main .module-filter.live-filter-bar input,
.app-main .module-filter.live-filter-bar select,
.app-main .module-filter.live-filter-bar .rsst-custom-select-button{
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
}
.app-main .live-filter-bar .filter-actions,
.app-main .module-filter.live-filter-bar .filter-actions{
  grid-column:auto!important;
  justify-self:end;
  align-self:end;
  width:auto!important;
  min-width:0;
  min-height:46px;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}
.app-main .live-filter-bar .filter-actions>*,
.app-main .module-filter.live-filter-bar .filter-actions>*{
  width:auto!important;
  min-width:94px;
  min-height:46px;
  white-space:nowrap;
}

/* Multi-filter pages adapt instead of compressing every control into one row. */
.app-main .live-filter-bar.live-filter-audit,
.app-main .audit-filter.live-filter-bar,
.app-main .report-filter-grid,
.app-main .attendance-summary-filters{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))!important;
  align-items:end!important;
  gap:12px!important;
  width:100%;
  max-width:100%;
}
.app-main .live-filter-bar.live-filter-audit .filter-search-field,
.app-main .audit-filter.live-filter-bar .filter-search-field{
  grid-column:span 2!important;
}
.app-main .report-filter-grid>label,
.app-main .attendance-summary-filters>label{
  min-width:0;
  width:100%;
}
.app-main .report-filter-grid input,
.app-main .report-filter-grid select,
.app-main .report-filter-grid .rsst-custom-select-button,
.app-main .attendance-summary-filters input,
.app-main .attendance-summary-filters select,
.app-main .attendance-summary-filters .rsst-custom-select-button{
  width:100%!important;
  min-height:46px!important;
  height:46px!important;
}
.app-main .report-filter-grid .filter-actions,
.app-main .attendance-summary-filters .filter-actions{
  grid-column:auto!important;
  align-self:end;
  justify-self:end;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  width:auto!important;
}
.app-main .report-filter-grid .filter-actions>*,
.app-main .attendance-summary-filters .filter-actions>*{
  width:auto!important;
  min-height:46px;
  white-space:nowrap;
}

.scanner-links{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:12px!important;
  margin-top:2px;
}
.scanner-links>a{margin:0!important;min-height:42px;padding:10px 15px}
.gun-scanner-form,.gun-scanner-form-auto{column-gap:14px!important;row-gap:14px!important}
.scan-feedback{margin-top:2px;min-height:54px}
.scanner-controls{gap:12px!important;margin:14px 0!important}
.phone-manual-form{gap:12px!important;padding:14px!important}
.phone-scan-result{margin-top:14px!important}

.panel-actions,.row-actions,.filter-actions,.modal-actions,.session-actions,.record-action-grid{gap:10px}
.panel-card,.welcome-card,.stat-card,.modal-card{max-width:100%}
img,svg,canvas,video{max-width:100%}
.modal-card{max-inline-size:calc(100vw - 24px)}
.rsst-custom-select-menu{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 24px)!important}

@media screen and (max-width:1100px){
  .app-main .live-filter-bar:not(.live-filter-single):not(.live-filter-audit),
  .app-main .module-filter.live-filter-bar:not(.live-filter-single):not(.live-filter-audit){
    grid-template-columns:minmax(0,1fr) minmax(210px,280px) auto!important;
  }
  .app-main .live-filter-bar.live-filter-audit .filter-search-field,
  .app-main .audit-filter.live-filter-bar .filter-search-field{grid-column:1/-1!important}
}

@media screen and (max-width:900px){
  .content-wrap{width:100%;max-width:100%}
  .welcome-card,.class-session-hero,.panel-heading,.account-settings-overview{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  .panel-actions,.row-actions{width:100%}
  .settings-page-grid,.account-settings-grid,.report-page-grid,.dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .inline-form,.inline-form.four,.form-grid,.details-grid{grid-template-columns:1fr!important}

  .app-body .app-main .live-filter-bar:not(.live-filter-audit),
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit),
  .app-body .app-main .live-filter-bar.live-filter-single,
  .app-body .app-main .module-filter.live-filter-bar.live-filter-single{
    grid-template-columns:minmax(0,1fr) auto!important;
  }
  .app-body .app-main .live-filter-bar:not(.live-filter-audit) .filter-search-field,
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit) .filter-search-field{
    grid-column:1/-1!important;
  }
  .app-body .app-main .live-filter-bar:not(.live-filter-audit)>label:not(.filter-search-field),
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit)>label:not(.filter-search-field){grid-column:1!important}
  .app-body .app-main .live-filter-bar:not(.live-filter-audit) .filter-actions,
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit) .filter-actions{
    grid-column:2!important;
    justify-self:end;
  }
}

@media screen and (max-width:760px){
  input,select,textarea,.rsst-custom-select-button{font-size:16px!important}
  input,select,textarea{min-height:46px}
  textarea{min-height:104px}

  .content-wrap{padding:14px 10px 28px!important}
  .panel-card{padding:15px!important;border-radius:16px!important}
  .attendance-module-card{padding:0!important}
  .panel-heading{gap:12px!important;margin-bottom:15px!important}
  .panel-actions,.row-actions,.modal-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
  }
  .panel-actions>*:not(.count-pill):not(.status):not(.role-pill),
  .row-actions>*:not(.status),.modal-actions>*{width:100%!important}
  .row-actions form,.panel-actions form{width:100%;margin:0}
  .date-filter{display:grid!important;grid-template-columns:minmax(0,1fr) auto;width:100%}
  .date-filter input{width:100%}

  .app-body .app-main .live-filter-bar,
  .app-body .app-main .module-filter.live-filter-bar,
  .app-body .app-main .live-filter-bar:not(.live-filter-audit),
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit),
  .app-body .app-main .live-filter-bar.live-filter-single,
  .app-body .app-main .module-filter.live-filter-bar.live-filter-single,
  .app-body .app-main .live-filter-bar.live-filter-audit,
  .app-body .app-main .audit-filter.live-filter-bar,
  .app-body .app-main .report-filter-grid,
  .app-body .app-main .attendance-summary-filters{
    grid-template-columns:1fr!important;
    width:100%;
    padding:12px!important;
    gap:11px!important;
    border-radius:14px!important;
  }
  .app-body .app-main .live-filter-bar .filter-search-field,
  .app-body .app-main .module-filter.live-filter-bar .filter-search-field,
  .app-body .app-main .live-filter-bar:not(.live-filter-audit) .filter-search-field,
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit) .filter-search-field,
  .app-body .app-main .live-filter-bar.live-filter-audit .filter-search-field,
  .app-body .app-main .audit-filter.live-filter-bar .filter-search-field,
  .app-body .app-main .live-filter-bar .filter-actions,
  .app-body .app-main .module-filter.live-filter-bar .filter-actions,
  .app-body .app-main .live-filter-bar:not(.live-filter-audit) .filter-actions,
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit) .filter-actions,
  .app-body .app-main .report-filter-grid .filter-actions,
  .app-body .app-main .attendance-summary-filters .filter-actions{
    grid-column:1!important;
    width:100%!important;
  }
  .app-body .app-main .live-filter-bar .filter-actions,
  .app-body .app-main .module-filter.live-filter-bar .filter-actions,
  .app-body .app-main .live-filter-bar:not(.live-filter-audit) .filter-actions,
  .app-body .app-main .module-filter.live-filter-bar:not(.live-filter-audit) .filter-actions,
  .app-body .app-main .report-filter-grid .filter-actions,
  .app-body .app-main .attendance-summary-filters .filter-actions{
    justify-self:stretch;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .app-body .app-main .live-filter-bar .filter-actions>*,
  .app-body .app-main .module-filter.live-filter-bar .filter-actions>*,
  .app-body .app-main .report-filter-grid .filter-actions>*,
  .app-body .app-main .attendance-summary-filters .filter-actions>*{width:100%!important}

  .modal-backdrop{padding:0!important;align-items:end!important}
  .modal-card{
    width:100%!important;
    max-width:100%!important;
    max-height:94dvh!important;
    padding:20px 15px calc(18px + env(safe-area-inset-bottom))!important;
    border-radius:22px 22px 0 0!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .modal-heading{padding-right:42px!important}
  .modal-close{top:12px!important;right:12px!important}
  .modal-form{grid-template-columns:1fr!important;gap:13px!important}
  .modal-form .form-span-2{grid-column:1!important}

  .rsst-custom-select-menu{max-width:calc(100vw - 12px)!important}
  .rsst-custom-select-option{min-height:44px!important;padding:11px 12px!important}
  .rsst-custom-select-footer{position:sticky;bottom:0}

  .scanner-panel{padding:18px 15px!important;gap:16px!important}
  .gun-scanner-form,.gun-scanner-form-auto{grid-template-columns:1fr!important}
  .gun-scanner-form>*{grid-column:1!important;width:100%!important}
  .gun-scanner-form>button{min-height:48px}
  .scan-feedback{align-items:flex-start!important;flex-direction:column!important;gap:5px!important}
  .scan-feedback strong{min-width:0!important}
  .scanner-links{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .scanner-links>a{width:100%!important;min-height:44px}

  .scanner-header{align-items:flex-start!important;flex-wrap:wrap}
  .scanner-header>div{min-width:0;flex:1}
  .scanner-header span{min-width:0}
  .scanner-header strong,.scanner-header small{overflow-wrap:anywhere}
  .scanner-controls{grid-template-columns:1fr!important;gap:10px!important}
  .scanner-controls button,.phone-manual-form button{width:100%!important;min-height:46px}
  .phone-manual-form{grid-template-columns:1fr!important}

  .table-wrap.rsst-mobile-table-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  .rsst-mobile-table{display:block!important;width:100%!important;min-width:0!important;border-collapse:separate!important}
  .rsst-mobile-table thead{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
  .rsst-mobile-table tbody{display:grid!important;gap:12px!important;width:100%!important}
  .rsst-mobile-table tbody tr{
    display:grid!important;width:100%!important;min-width:0!important;
    overflow:hidden;border:1px solid #d7e3ec;border-radius:14px;background:#fff;
    box-shadow:0 8px 22px rgba(31,70,98,.07)
  }
  .rsst-mobile-table tbody tr[hidden]{display:none!important}
  .rsst-mobile-table td{
    display:grid!important;grid-template-columns:minmax(106px,.42fr) minmax(0,1fr);
    gap:10px;width:100%!important;min-width:0!important;max-width:none!important;
    padding:10px 12px!important;border-bottom:1px solid #e5edf3!important;
    text-align:left!important;overflow-wrap:anywhere;background:#fff!important
  }
  .rsst-mobile-table td:last-child{border-bottom:0!important}
  .rsst-mobile-table td::before{
    content:attr(data-label);color:#536b7f;font-size:.67rem;font-weight:900;
    letter-spacing:.045em;text-transform:uppercase;line-height:1.35
  }
  .rsst-mobile-table td[data-mobile-full="true"]{display:block!important;padding:20px 14px!important;text-align:center!important}
  .rsst-mobile-table td[data-mobile-full="true"]::before{display:none!important}
  .rsst-mobile-table td>*{min-width:0;max-width:100%}
  .rsst-mobile-table .row-actions,.rsst-mobile-table .record-actions-cell{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important
  }
  .rsst-mobile-table .record-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .rsst-mobile-table .row-actions button,.rsst-mobile-table .row-actions a,
  .rsst-mobile-table .row-actions form,.rsst-mobile-table .record-action-grid>*{width:100%!important}

  .table-pagination{align-items:stretch!important;flex-direction:column!important}
  .table-pagination-controls{width:100%!important;justify-content:space-between!important}
  .pagination-pages{overflow-x:auto!important;justify-content:flex-start!important}

  .attendance-tabs,.archive-tabs,.staff-account-tabs{
    max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin
  }
  .attendance-tabs>a,.archive-tabs>button,.staff-account-tabs>button{flex:0 0 auto}

  .topbar{padding:0 10px!important}
  .topbar-title{min-width:0;max-width:calc(100vw - 78px)}
  .topbar-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .philippine-clock{display:none!important}
  .user-chip{min-width:0}
}

@media screen and (max-width:480px){
  .content-wrap{padding-left:8px!important;padding-right:8px!important}
  .panel-card{padding:13px!important}
  .attendance-module-card{padding:0!important}
  .primary-button,.secondary-button,.danger-button{min-height:44px;padding:10px 13px}
  .rsst-mobile-table td{grid-template-columns:1fr!important;gap:5px!important}
  .rsst-mobile-table td::before{margin-bottom:1px}
  .rsst-mobile-table .record-action-grid{grid-template-columns:1fr!important}
  .date-filter{grid-template-columns:1fr!important}
  .date-filter button{width:100%!important}
  .camera-card{border-radius:16px!important}
  .phone-scanner{padding-left:10px!important;padding-right:10px!important}
}