/* Check Point R5P5-HF11 — targeted UI refinement owner.
   UX/business flows remain unchanged; this file owns the requested visual refinements. */

/* --------------------------------------------------------------------------
   1. Feedback language: one center progress surface for foreground operations.
   Small/utility controls only depress slightly; GPS/photo remain inline-progress exceptions.
   -------------------------------------------------------------------------- */
.cp-button-press-loading:not(.public-process-morph){
  transform:translateY(1px) scale(.985)!important;
  filter:saturate(.92)!important;
  opacity:.78!important;
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--text-strong) 8%,transparent)!important;
}
.cp-button-press-loading:not(.public-process-morph)>:not(.cp-progress-loader){opacity:.9!important}
:is(.row-action,.record-detail-button,.scope-detail-button,.middle-records-button,.privacy-right-button,.admin-tool-action,.admin-tools-toggle,.management-button):active:not(:disabled){
  transform:translateY(1px) scale(.985)!important;
}

.action-feedback-modal .action-feedback-card{
  width:min(300px,calc(100vw - 36px))!important;
  min-height:0!important;
  padding:22px 20px 19px!important;
  border-radius:18px!important;
  gap:7px!important;
  text-align:center!important;
}
.action-loader-stage{height:104px!important;width:100%!important}
.action-feedback-modal .cp-progress-loader--hero,
.submit-loading-modal .cp-progress-loader--hero{
  --cp-progress-size:78px;
  --cp-progress-thickness:6px;
}
.action-feedback-modal .cp-progress-loader--hero::after,
.submit-loading-modal .cp-progress-loader--hero::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border-top:2px solid color-mix(in srgb,var(--cp-progress-accent) 72%,white 28%);
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  border-left:2px solid transparent;
  animation:cp-refinement-orbit 1.05s linear infinite;
  pointer-events:none;
}
.action-feedback-modal.is-complete .cp-progress-loader--hero::after,
.action-feedback-modal.is-error .cp-progress-loader--hero::after{animation-play-state:paused;opacity:.35}
@keyframes cp-refinement-orbit{to{transform:rotate(360deg)}}
.portal-loading--quiet{min-height:74px!important;padding:12px!important;gap:0!important}
.portal-loading--quiet .portal-loading-copy{font-size:8.5px!important;opacity:.68}

/* --------------------------------------------------------------------------
   2. Public primary process exception — restore centered capsule → circle → result → capsule.
   Only Check-in and Login own this morph. It is deliberately NOT the generic button loader.
   -------------------------------------------------------------------------- */
#publicPage .public-process-morph{
  justify-self:center!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  transition:width .34s cubic-bezier(.2,.8,.2,1),min-width .34s cubic-bezier(.2,.8,.2,1),max-width .34s cubic-bezier(.2,.8,.2,1),border-radius .34s ease,background .2s ease,box-shadow .2s ease,opacity .16s ease!important;
}
#publicPage .public-process-morph:is(.is-loading,.is-success,.is-error){
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  border-radius:50%!important;
  justify-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  color:transparent!important;
  transform:none!important;
  overflow:hidden!important;
}
#publicPage .public-process-morph:is(.is-loading,.is-success,.is-error)>*{opacity:0!important;visibility:hidden!important}
#publicPage .public-process-morph.is-loading::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:17px;height:17px;
  margin:-8.5px 0 0 -8.5px;
  border:2px solid color-mix(in srgb,currentColor 28%,transparent);
  border-top-color:#fff;
  border-right-color:#fff;
  border-radius:50%;
  animation:cp-public-process-spin .7s linear infinite;
}
#publicPage .public-process-morph.is-success::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:10px;height:17px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translate(-50%,-61%) rotate(45deg);
}
#publicPage .public-process-morph.is-error::before,
#publicPage .public-process-morph.is-error::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:18px;height:2px;
  border-radius:999px;
  background:#fff;
}
#publicPage .public-process-morph.is-error::before{transform:translate(-50%,-50%) rotate(45deg)}
#publicPage .public-process-morph.is-error::after{transform:translate(-50%,-50%) rotate(-45deg)}
#publicPage .public-process-morph.is-restoring{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  border-radius:var(--pill)!important;
  justify-self:center!important;
}
@keyframes cp-public-process-spin{to{transform:rotate(360deg)}}

/* GPS and Photo are the only normal buttons allowed to carry inline % progress. */
#publicPage :is(#gpsButton,#photoButton).is-loading>.cp-progress-loader--button{display:grid!important}


/* Mobile containment: portal grid children must never expand the shell beyond the viewport. */
#portalPage .portal-shell{grid-template-columns:minmax(0,1fr)!important}
#portalPage .portal-content,#portalPage .portal-screen,#portalPage .portal-heading{min-width:0!important;max-width:100%!important}
#portalPage .portal-content{width:100%!important}

/* --------------------------------------------------------------------------
   3. Public entry tabs and Portal navigation are different components.
   -------------------------------------------------------------------------- */
#publicPage .public-tabs{border-radius:999px!important}
#publicPage .public-tab{border:1px solid transparent!important;border-radius:999px!important}
#publicPage .public-tab.is-active{color:#fff!important;border-color:transparent!important;background:linear-gradient(90deg,var(--a1),var(--a2))!important}
html[data-theme="dark"] #publicPage .public-tab.is-active{color:#fff!important;border-color:transparent!important;background:linear-gradient(90deg,var(--a1),var(--a2))!important}
#portalPage .portal-nav-button:not([hidden]){border-radius:8px!important}
@media(max-width:760px){#portalPage .portal-nav-button:not([hidden]){border-radius:8px!important}}

/* --------------------------------------------------------------------------
   4. Personal attendance filter line.
   -------------------------------------------------------------------------- */
.portal-record-controls{align-items:stretch!important}
.record-filter-row{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(250px,1.55fr) minmax(94px,.55fr) minmax(112px,.68fr);
  align-items:end;
  gap:6px;
}
.record-control-field{min-width:0;display:grid;gap:3px;color:var(--muted);font-size:7px;line-height:1.15}
.record-control-field>.record-filter{width:100%!important;min-width:0!important;height:34px!important;border-radius:9px!important}
.record-date-range{min-height:40px!important;height:auto!important;max-height:none!important;padding:4px 5px!important;border-radius:9px!important;align-items:stretch!important}
.record-date-range .record-date-filter{height:28px!important;border-radius:7px!important}
.record-all-tools{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:6px;align-items:end}
.record-all-tools .record-search{width:100%!important}
.portal-record-controls.is-self-scope .record-filter-row{width:100%}
@media(max-width:760px){
  .portal-record-controls{display:block!important;width:100%!important;max-width:100%!important;overflow:visible!important}
  .record-scope-switch{margin-bottom:6px!important}
  .record-filter-row{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.56fr) minmax(0,.62fr) minmax(0,.72fr)!important;
    align-items:start!important;
    gap:4px!important;
    overflow:hidden!important;
    padding:0!important;
  }
  .record-filter-row>*{min-width:0!important;max-width:100%!important}
  .record-date-range{
    grid-column:auto!important;
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    min-height:40px!important;
    height:auto!important;
    max-height:none!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    align-items:end!important;
    gap:4px!important;
    padding:4px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }
  .record-date-range label{min-width:0!important;display:grid!important;grid-template-columns:1fr!important;gap:2px!important;font-size:6.4px!important}
  .record-date-range label span{padding-left:4px}
  .record-date-range .record-date-filter{width:100%!important;max-width:100%!important;height:28px!important;min-height:28px!important;padding:0 4px!important;font-size:6.7px!important}
  .record-control-field{min-width:0!important;max-width:100%!important;width:100%!important;font-size:6.1px!important}
  .record-control-field:last-child{width:100%!important}
  .record-control-field>.record-filter{width:100%!important;max-width:100%!important;height:30px!important;min-height:30px!important;padding:0 5px!important;font-size:6.7px!important}
  .record-all-tools{margin-top:6px;grid-template-columns:minmax(0,1fr) auto!important}
  .record-all-tools .record-search{height:32px!important;min-height:32px!important;font-size:7px!important}
  .record-all-tools .record-export-button{height:32px!important;min-height:32px!important;border-radius:8px!important;padding:0 9px!important;font-size:7px!important}
}

/* --------------------------------------------------------------------------
   5. Admin overview begins with the exact personal overview, admin data follows.
   -------------------------------------------------------------------------- */
.admin-overview-section{grid-column:1/-1;display:grid;gap:9px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.admin-overview-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.admin-overview-heading h3{margin:2px 0 1px;color:var(--text-strong);font-size:13px;font-weight:500}
.admin-overview-heading p{margin:0;color:var(--muted);font-size:8px}
.admin-overview-metrics{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.admin-overview-metrics>div{min-width:0;padding:8px 5px;border:1px solid var(--line);border-radius:8px;background:var(--panel);text-align:center}
.admin-overview-metrics strong,.admin-overview-metrics span{display:block}.admin-overview-metrics strong{color:var(--text-strong);font-size:13px}.admin-overview-metrics span{margin-top:1px;color:var(--muted);font-size:6.8px;line-height:1.2}
.admin-overview-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:760px){
  .admin-overview-section{gap:7px;padding-top:10px}
  .admin-overview-heading{align-items:flex-start}.admin-overview-heading h3{font-size:10.5px}.admin-overview-heading p{font-size:7px}
  .admin-overview-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  .admin-overview-metrics>div{padding:6px 3px;border-radius:6px}.admin-overview-metrics strong{font-size:10px}.admin-overview-metrics span{font-size:5.9px}
  .admin-overview-cards{grid-template-columns:1fr;gap:6px}
}

/* --------------------------------------------------------------------------
   6. PDPA: denser hierarchy, especially on phones.
   -------------------------------------------------------------------------- */
#privacySettingsContent .privacy-grid{gap:8px!important}
#privacySettingsContent .privacy-card{padding:12px!important;border-radius:10px!important}
#privacySettingsContent .privacy-card h3{margin-bottom:5px!important}
#privacySettingsContent .privacy-summary{gap:5px!important}
#privacySettingsContent .privacy-summary>div{padding:7px!important;border-radius:7px!important}
#privacySettingsContent .privacy-right-grid{gap:5px!important}
#privacySettingsContent .privacy-right-button{min-height:34px!important;padding:6px 7px!important;border-radius:7px!important}
#privacySettingsContent .privacy-actions{gap:5px!important}
#privacySettingsContent .privacy-actions :is(a,button){min-height:32px!important;border-radius:7px!important}
@media(max-width:700px){
  #privacySettingsContent .privacy-grid{display:block!important}
  #privacySettingsContent .privacy-card{
    margin:0!important;
    padding:10px 2px!important;
    border:0!important;
    border-bottom:1px solid var(--line)!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #privacySettingsContent .privacy-card:first-child{padding-top:2px!important}
  #privacySettingsContent .privacy-lead{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;align-items:start!important}
  #privacySettingsContent .privacy-lead strong{font-size:9.5px!important}
  #privacySettingsContent .privacy-lead span,#privacySettingsContent .privacy-card p{font-size:7.4px!important;line-height:1.45!important}
  #privacySettingsContent .privacy-right-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:4px!important;margin-top:5px!important}
  #privacySettingsContent .privacy-right-button{min-height:32px!important;padding:5px 6px!important;font-size:7px!important}
  #privacySettingsContent .privacy-summary{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
  #privacySettingsContent .privacy-summary>div{padding:5px 3px!important}
  #privacySettingsContent .privacy-summary strong{font-size:9px!important}.privacy-summary span{font-size:6px!important}
  #privacySettingsContent .privacy-request-row{grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important;padding:6px 0!important}
  #privacySettingsContent .privacy-request-controls{justify-content:flex-end!important}
  #privacySettingsContent .privacy-notice-textarea{min-height:230px!important;padding:9px!important;font-size:8px!important}
  #privacySettingsContent .privacy-notice-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  #privacySettingsContent .privacy-publish-confirm{grid-column:1/-1!important}
}

/* --------------------------------------------------------------------------
   7. User management mobile toolbar: one proportionate search row + one tool trigger.
   -------------------------------------------------------------------------- */
.user-management-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:6px!important;align-items:center!important}
.user-search-group{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important;width:100%!important}
.user-toolbar-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}
.user-toolbar-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
@media(max-width:760px){
  #userManagementContent .user-management-toolbar{grid-template-columns:minmax(0,1fr) 38px!important;gap:5px!important}
  #userManagementContent .user-search-group{grid-template-columns:minmax(0,1fr) 38px!important;gap:5px!important}
  #userManagementContent :is(#userSearchInput,#userSearchButton,#userToolsToggle){height:38px!important;min-height:38px!important;margin:0!important}
  #userManagementContent #userSearchInput{min-width:0!important;width:100%!important;padding-left:30px!important;font-size:7.2px!important}
  #userManagementContent :is(#userSearchButton,#userToolsToggle){width:38px!important;min-width:38px!important;max-width:38px!important;padding:0!important;border-radius:8px!important}
  #userManagementContent .user-toolbar-icon span{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
  #userManagementContent .admin-tools{width:38px!important;margin:0!important}
  #userManagementContent .admin-tools-panel{right:0!important;left:auto!important;min-width:210px!important}
}

@media(prefers-reduced-motion:reduce){
  .action-feedback-modal .cp-progress-loader--hero::after,.submit-loading-modal .cp-progress-loader--hero::after,#publicPage .public-process-morph.is-loading::after{animation-duration:.01ms!important}
}