/* =========================================================
   PIRANTI ATTENDANCE
   MY SCHEDULE CALENDAR V4
   ========================================================= */

.my-schedule-calendar-view{
  width:100%;
  margin-top:14px;
}

.my-schedule-calendar-toolbar{
  display:grid;
  grid-template-columns:40px 1fr 40px;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.my-schedule-calendar-title{
  text-align:center;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}

.my-schedule-calendar-nav-btn{
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  min-height:40px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:22px !important;
}


.my-schedule-calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
  margin-bottom:8px;
}

.my-schedule-calendar-weekdays>div{
  padding:7px 3px;
  text-align:center;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}


.my-schedule-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}

.my-schedule-calendar-daycell{
  position:relative;
  min-width:0;
  min-height:105px;
  padding:8px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}

.my-schedule-calendar-daycell.is-empty{
  background:#fafafa;
}

.my-schedule-calendar-daycell.is-today{
  border:2px solid #8b1e46;
  background:#fff8fb;
}

.my-schedule-calendar-daynum{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-bottom:6px;
  border-radius:50%;
  color:#334155;
  font-size:12px;
  font-weight:800;
}

.my-schedule-calendar-daycell.is-today
.my-schedule-calendar-daynum{
  background:#8b1e46;
  color:#fff;
}


.my-schedule-calendar-items{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.my-schedule-calendar-shift{
  min-width:0;
  padding:6px 7px;
  border-radius:8px;
}

.my-schedule-calendar-shift.is-work{
  background:#eef2ff;
}

.my-schedule-calendar-shift.is-off{
  background:#f1f5f9;
}

.my-schedule-calendar-code{
  color:#1e293b;
  font-size:11px;
  font-weight:800;
}

.my-schedule-calendar-time{
  margin-top:2px;
  color:#64748b;
  font-size:9px;
  line-height:1.3;
}

.my-schedule-calendar-status{
  margin-top:4px;
  color:#7c3aed;
  font-size:8px;
  font-weight:700;
}

.my-schedule-calendar-action{
  margin-top:5px !important;
  min-height:28px !important;
  padding:4px 7px !important;
  font-size:9px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

  .my-schedule-calendar-view{
    margin-top:12px;
  }

  .my-schedule-calendar-toolbar{
    grid-template-columns:34px 1fr 34px;
    gap:7px;
    margin:0 4px 10px;
  }

  .my-schedule-calendar-title{
    font-size:13px;
  }

  .my-schedule-calendar-nav-btn{
    width:34px !important;
    min-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    font-size:20px !important;
  }


  .my-schedule-calendar-weekdays{
    gap:0;
    margin:0 3px;
    border:1px solid #e5e7eb;
    border-bottom:0;
    border-radius:10px 10px 0 0;
    overflow:hidden;
  }

  .my-schedule-calendar-weekdays>div{
    height:28px;
    padding:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#f8fafc;
    border-right:1px solid #edf1f5;

    font-size:7px;
  }

  .my-schedule-calendar-weekdays>div:last-child{
    border-right:0;
  }


  .my-schedule-calendar-grid{
    gap:0;
    margin:0 3px;

    border-left:1px solid #e5e7eb;
    border-top:1px solid #e5e7eb;

    border-radius:0 0 10px 10px;
    overflow:hidden;
  }


  .my-schedule-calendar-daycell{
    height:58px;
    min-height:58px;

    padding:3px;

    border:0;
    border-right:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;

    border-radius:0;

    overflow:hidden;
  }

  .my-schedule-calendar-daycell.is-empty{
    background:#fafafa;
  }

  .my-schedule-calendar-daycell.is-today{
    border-right:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
    box-shadow:inset 0 0 0 2px #8b1e46;
  }


  .my-schedule-calendar-daynum{
    width:20px;
    height:20px;
    margin:0 auto 4px;

    font-size:9px;
  }


  .my-schedule-calendar-items{
    gap:2px;
  }


  .my-schedule-calendar-shift{
    padding:3px 2px;
    border-radius:5px;

    text-align:center;
  }


  .my-schedule-calendar-code{
    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:7px;
    line-height:1;
  }


  /*
   * MOBILE:
   * yang tampil di kotak kalender hanya kode:
   * OH / SF1 / SF2 / SF3 / OFF
   */

  .my-schedule-calendar-time,
  .my-schedule-calendar-status,
  .my-schedule-calendar-action{
    display:none !important;
  }

}


@media(max-width:380px){

  .my-schedule-calendar-daycell{
    height:54px;
    min-height:54px;
  }

  .my-schedule-calendar-code{
    font-size:6.5px;
  }

}