#aquila-hrm-r6{
  min-height:calc(100vh - 72px);
  background:#f5f7fa;
  color:#1d2939;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.aquila-hrm-r6-owner{
  position:relative!important;
}

.aquila-hrm-r6-owner>#aquila-hrm-r6{
  display:block!important;
}

.aquila-hrm-r6-owner>:not(#aquila-hrm-r6){
  display:none!important;
}

.sm-shell{
  max-width:1680px;
  margin:0 auto;
  padding:24px;
}

.sm-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.sm-head h1{
  margin:3px 0 6px;
  font-size:28px;
  line-height:1.15;
  font-weight:780;
  letter-spacing:-.02em;
}

.sm-head p,
.sm-panel-head p{
  margin:0;
  color:#667085;
  font-size:13px;
}

.sm-eyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#475467;
}

.sm-head-actions,
.sm-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.sm-nav{
  display:flex;
  gap:4px;
  overflow:auto;
  padding:5px;
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:10px;
  margin-bottom:16px;
}

.sm-nav button,
.sm-payroll-tabs button{
  border:0;
  background:transparent;
  color:#475467;
  border-radius:7px;
  padding:9px 11px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
}

.sm-nav button.active,
.sm-payroll-tabs button.active{
  background:#eef4ff;
  color:#1849a9;
}

.sm-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}

.sm-card,
.sm-panel{
  background:#fff;
  border:1px solid #e4e7ec;
  border-radius:12px;
}

.sm-card{
  padding:15px;
}

.sm-card-label{
  font-size:12px;
  color:#667085;
  font-weight:650;
}

.sm-card-value{
  font-size:22px;
  font-weight:780;
  margin-top:5px;
}

.sm-card-note{
  font-size:11px;
  color:#98a2b3;
  margin-top:3px;
}

.sm-grid2{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);
  gap:14px;
}

.sm-grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.sm-panel{
  padding:16px;
  margin-bottom:14px;
}

.sm-panel.compact{
  padding:12px 14px;
}

.sm-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:12px;
}

.sm-panel-head h2{
  font-size:16px;
  line-height:1.3;
  margin:0 0 3px;
}

.sm-btn{
  appearance:none;
  border:1px solid #d0d5dd;
  background:#fff;
  color:#344054;
  border-radius:8px;
  padding:8px 12px;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
}

.sm-btn:hover{
  background:#f9fafb;
}

.sm-btn.primary{
  background:#175cd3;
  border-color:#175cd3;
  color:#fff;
}

.sm-btn.danger{
  color:#b42318;
  border-color:#fda29b;
}

.sm-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.sm-link{
  appearance:none;
  border:0;
  background:none;
  color:#175cd3;
  font:inherit;
  font-weight:700;
  padding:0;
  cursor:pointer;
}

.sm-table-wrap{
  overflow:auto;
  border:1px solid #eaecf0;
  border-radius:9px;
}

.sm-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px;
}

.sm-table th{
  background:#f9fafb;
  color:#475467;
  text-align:left;
  padding:9px 10px;
  border-bottom:1px solid #eaecf0;
  white-space:nowrap;
}

.sm-table td{
  padding:9px 10px;
  border-bottom:1px solid #f2f4f7;
  vertical-align:top;
}

.sm-table tr:last-child td{
  border-bottom:0;
}

.sm-badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  background:#f2f4f7;
  color:#344054;
  font-size:11px;
  font-weight:750;
}

.sm-badge.ok{
  background:#ecfdf3;
  color:#027a48;
}

.sm-badge.warn{
  background:#fffaeb;
  color:#b54708;
}

.sm-badge.bad{
  background:#fef3f2;
  color:#b42318;
}

.sm-empty{
  padding:28px 16px;
  text-align:center;
  color:#667085;
  font-size:13px;
}

.sm-alert,
.sm-callout{
  padding:11px 12px;
  border-radius:9px;
  font-size:13px;
  margin-bottom:12px;
}

.sm-alert.info,
.sm-callout{
  background:#eff8ff;
  color:#175cd3;
}

.sm-alert.success{
  background:#ecfdf3;
  color:#027a48;
}

.sm-alert.warn{
  background:#fffaeb;
  color:#b54708;
}

.sm-alert.error{
  background:#fef3f2;
  color:#b42318;
}

.sm-payroll-tabs{
  display:flex;
  gap:4px;
  overflow:auto;
}

.sm-loading{
  color:#667085;
}

.sm-modal-bg{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(16,24,40,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.sm-modal{
  width:min(720px,100%);
  max-height:88vh;
  overflow:auto;
  background:#fff;
  border-radius:14px;
  box-shadow:0 20px 70px rgba(16,24,40,.28);
  padding:18px;
}

.sm-modal-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:14px;
}

.sm-modal-head h2{
  margin:3px 0 0;
  font-size:19px;
}

.sm-icon-btn{
  border:0;
  background:#f2f4f7;
  width:32px;
  height:32px;
  border-radius:8px;
  font-size:20px;
  cursor:pointer;
}

.sm-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.sm-field{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:#344054;
}

.sm-field.full,
.sm-alert.full{
  grid-column:1/-1;
}

.sm-field input,
.sm-field select,
.sm-field textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid #d0d5dd;
  border-radius:8px;
  padding:9px 10px;
  background:#fff;
  color:#101828;
  font:inherit;
  font-weight:500;
}

.sm-field textarea{
  min-height:92px;
  resize:vertical;
}

.sm-required{
  color:#d92d20;
}

.sm-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:16px;
}

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

  .sm-grid2,
  .sm-grid3{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .sm-shell{
    padding:16px;
  }

  .sm-head{
    flex-direction:column;
  }

  .sm-form{
    grid-template-columns:1fr;
  }

  .sm-field.full,
  .sm-alert.full{
    grid-column:auto;
  }
}

@media(max-width:430px){
  .sm-shell{
    padding:12px;
  }

  .sm-head h1{
    font-size:23px;
  }

  .sm-cards{
    grid-template-columns:1fr;
  }

  .sm-panel{
    padding:12px;
  }

  .sm-nav{
    margin-left:-2px;
    margin-right:-2px;
  }
}

/* ==========================================================================
   HRM-R6-SIMPLE-MIGHTY — TOP NAVIGATION
   ========================================================================== */

.sm-global-hrm-item{
  list-style:none;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}

.sm-global-hrm-nav{
  appearance:none;
  -webkit-appearance:none;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  margin:0 2px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#344054;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:720;
  white-space:nowrap;
  cursor:pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.sm-global-hrm-nav:hover{
  background:#f8fafc;
  color:#101828;
}

.sm-global-hrm-nav.active,
.sm-global-hrm-nav[aria-current="page"]{
  background:#ffffff;
  color:#175cd3;
  border-color:#d0d5dd;
  box-shadow:
    0 1px 2px rgba(16,24,40,.05),
    0 3px 10px rgba(16,24,40,.05);
}

.sm-global-hrm-icon{
  width:21px;
  height:21px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background:#eef4ff;
  color:#175cd3;
}

@media(max-width:768px){
  .sm-global-hrm-nav{
    height:38px;
    padding:0 10px;
  }
}

/* ==========================================================================
   HRM-R6 canonical principal-menu entry
   ========================================================================== */

#aquila-hrm-r6-nav{
  position:relative;
}

#aquila-hrm-r6-nav .aquila-hrm-nav-button{
  width:100%;
}

#aquila-hrm-r6-nav .aquila-hrm-nav-icon{
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:#eef4ff;
  color:#175cd3;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
}

#aquila-hrm-r6-nav .aquila-hrm-nav-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
}

#aquila-hrm-r6-nav .aquila-hrm-nav-copy small{
  color:#667085;
  font-size:10px;
  line-height:1.2;
  white-space:nowrap;
}

#aquila-hrm-r6-nav .aquila-hrm-nav-button.active,
#aquila-hrm-r6-nav.is-active .aquila-hrm-nav-button{
  color:#175cd3;
}


/* ==========================================================================
   HRM R6 — clean visible top-menu entry
   ========================================================================== */

#aquila-hrm-visible-menu-r5{
  flex:0 0 auto;
  min-width:0;
}

#aquila-hrm-visible-button-r5{
  white-space:nowrap!important;
}

#aquila-hrm-visible-button-r5::before,
#aquila-hrm-visible-button-r5::after,
#aquila-hrm-visible-menu-r5::before,
#aquila-hrm-visible-menu-r5::after{
  content:none!important;
  display:none!important;
}


/* ==========================================================================
   HRM R6 — native-style module dropdown
   ========================================================================== */

#aquila-hrm-menu-r6{
  position:relative;
  flex:0 0 auto;
  min-width:0;
}

/*
 * The button keeps the existing Finance menu classes.
 * Do not replace its typography, spacing or base visual language.
 */

#aquila-hrm-button-r6{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
}

#aquila-hrm-top-label-r6{
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
}

#aquila-hrm-chevron-r6{
  flex:0 0 auto;
  transition:transform .16s ease;
}

#aquila-hrm-menu-r6.aquila-hrm-menu-open-r6
#aquila-hrm-chevron-r6{
  transform:rotate(180deg);
}

/*
 * Prevent Finance-generated pseudo labels from leaking into HRM.
 */

#aquila-hrm-menu-r6::before,
#aquila-hrm-menu-r6::after,
#aquila-hrm-button-r6::before,
#aquila-hrm-button-r6::after{
  content:none!important;
  display:none!important;
}

/*
 * Compact professional dropdown matching the light Ubuzima+ navigation.
 */

#aquila-hrm-dropdown-r6{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:10020;

  width:220px;
  max-width:min(220px,calc(100vw - 24px));

  padding:6px;

  background:#ffffff;

  border:1px solid rgba(208,213,221,.92);
  border-radius:11px;

  box-shadow:
    0 10px 30px rgba(16,24,40,.10),
    0 2px 8px rgba(16,24,40,.05);
}

#aquila-hrm-dropdown-r6[hidden]{
  display:none!important;
}

.aquila-hrm-dropdown-item-r6{
  appearance:none;
  -webkit-appearance:none;

  width:100%;

  display:flex;
  align-items:center;

  padding:9px 10px;

  border:0;
  border-radius:7px;

  background:transparent;

  color:#344054;

  text-align:left;

  font-family:inherit;
  font-size:12px;
  line-height:1.25;
  font-weight:650;

  cursor:pointer;
}

.aquila-hrm-dropdown-item-r6:hover,
.aquila-hrm-dropdown-item-r6:focus-visible{
  background:#f2f4f7;
  color:#101828;
  outline:none;
}

.aquila-hrm-dropdown-item-r6:active{
  background:#eaecf0;
}

.aquila-hrm-dropdown-label-r6{
  font:inherit;
  color:inherit;
}

@media(max-width:768px){

  #aquila-hrm-dropdown-r6{
    left:auto;
    right:0;
  }

}


/* ==========================================================================
   AQUILA HRM PLATFORM CONVERGENCE R7

   Layout values follow the established Procurement/POS module-home language:
   - platform heading cards
   - 1.35rem module-home rhythm
   - 3-column KPI layout
   - 16px operational cards
   - 1100 / 768 / 430 responsive collapse
   ========================================================================== */

#aquila-hrm-r6{
  min-height:100vh;
  background:#f5f7fa;
}

/*
 * The global Workspace Navigation V3 remains above the workspace.
 * HRM content starts below it rather than sitting underneath it.
 */

#aquila-hrm-r6 .sm-shell{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  margin:0;
  padding:96px 24px 36px;
}

/*
 * R7 has no local tab rail.
 * These are defensive only in case stale markup is present during a frame.
 */

#aquila-hrm-r6 .sm-nav,
#aquila-hrm-r6 .sm-head{
  display:none!important;
}

/*
 * Established module-home rhythm.
 */

#aquila-hrm-r6 .aquila-hrm-platform-home{
  display:grid;
  gap:1.35rem;
  min-width:0;
}

/*
 * Reuse platform-heading-card for the visual authority.
 * Only HRM-specific layout corrections live here.
 */

#aquila-hrm-r6 .aquila-hrm-platform-title{
  width:100%;
  box-sizing:border-box;
}

#aquila-hrm-r6 .aquila-hrm-platform-title > div{
  min-width:0;
}

#aquila-hrm-r6 .aquila-hrm-platform-title h1{
  margin-top:.18rem;
}

#aquila-hrm-r6 .aquila-hrm-platform-title p{
  max-width:760px;
}

#aquila-hrm-r6 .aquila-hrm-platform-refresh{
  flex:0 0 auto;
}

/*
 * Same menu-card dimensions used by Procurement module home.
 */

#aquila-hrm-r6 .aquila-hrm-home-grid{
  align-items:stretch;
}

#aquila-hrm-r6 .aquila-hrm-home-card{
  min-height:104px;
  height:100%;
}

/*
 * Same Procurement KPI proportions.
 */

#aquila-hrm-r6 .aquila-hrm-kpi-grid{
  display:grid;
  grid-template-columns:
    repeat(4,minmax(0,1fr));
  gap:.9rem;
  min-width:0;
}

#aquila-hrm-r6 .aquila-hrm-kpi-grid
.procurement-home-kpi{
  display:grid;
  align-content:start;
  gap:.34rem;
  min-width:0;
  min-height:128px;
  padding:1rem;
  border:1px solid rgba(89,109,128,.18);
  border-radius:16px;
  background:#fff;
  box-shadow:
    0 10px 28px rgba(35,57,79,.06);
}

/*
 * Operational content is intentionally compact.
 * No giant empty dashboard blocks.
 */

#aquila-hrm-r6 .aquila-hrm-operational-grid{
  display:grid;
  grid-template-columns:
    minmax(0,.9fr)
    minmax(0,1.4fr);
  gap:1rem;
  min-width:0;
}

#aquila-hrm-r6 .aquila-hrm-operational-card{
  min-height:0;
  margin:0;
  border-radius:16px;
}

#aquila-hrm-r6 .aquila-hrm-compact-empty{
  display:flex;
  align-items:center;
  min-height:72px;
  padding:.8rem 0;
  color:#667085;
  font-size:13px;
}

/*
 * Tables remain practical rather than compressed.
 */

#aquila-hrm-r6 .sm-table-wrap{
  max-width:100%;
  overflow-x:auto;
}

/*
 * The old Simple Mighty font declaration must not create
 * a separate visual identity. Inherit the Admin platform typography.
 */

#aquila-hrm-r6,
#aquila-hrm-r6 button,
#aquila-hrm-r6 input,
#aquila-hrm-r6 select,
#aquila-hrm-r6 textarea{
  font-family:inherit;
}

/*
 * Responsive behavior follows the Procurement module breakpoints.
 */

@media(max-width:1100px){

  #aquila-hrm-r6 .aquila-hrm-kpi-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  #aquila-hrm-r6 .aquila-hrm-operational-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:768px){

  #aquila-hrm-r6 .sm-shell{
    padding:
      84px
      16px
      28px;
  }

  #aquila-hrm-r6 .aquila-hrm-platform-title,
  #aquila-hrm-r6 .procurement-home-section-heading{
    align-items:stretch;
    flex-direction:column;
  }

  #aquila-hrm-r6 .aquila-hrm-platform-title > button{
    width:100%;
  }

  #aquila-hrm-r6 .aquila-hrm-kpi-grid{
    grid-template-columns:1fr;
  }

}

@media(max-width:430px){

  #aquila-hrm-r6 .sm-shell{
    padding:
      78px
      12px
      22px;
  }

  #aquila-hrm-r6 .aquila-hrm-platform-home{
    gap:1rem;
  }

  #aquila-hrm-r6 .aquila-hrm-home-card{
    min-height:92px;
  }

  #aquila-hrm-r6 .aquila-hrm-kpi-grid
  .procurement-home-kpi{
    min-height:112px;
  }

}