/* =========================================================
   PIRANTI ATTENDANCE
   JADWAL SAYA - MOBILE CALENDAR FINAL
   ========================================================= */

@media(max-width:700px){

  .my-schedule-panel{
    overflow:hidden !important;
  }


  /* FILTER BUTTON */
  .my-schedule-panel .action-row{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
  }

  .my-schedule-panel .action-row button{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;

    margin:0 !important;
    padding:6px 3px !important;

    border-radius:10px !important;

    font-size:9px !important;
    white-space:nowrap !important;
  }


  /* ======================================================
     MONTH NAVIGATION
     ====================================================== */

  .my-schedule-panel .attendance-calendar-head{
    display:block !important;

    margin:14px 0 10px !important;
    padding:0 10px !important;
  }

  .my-schedule-panel .attendance-calendar-nav{
    display:grid !important;

    grid-template-columns:
      34px minmax(0,1fr) 34px !important;

    align-items:center !important;
    gap:8px !important;

    width:100% !important;

    margin:0 !important;
  }

  .my-schedule-panel .attendance-calendar-nav strong{
    min-width:0 !important;

    text-align:center !important;

    font-size:14px !important;
    font-weight:800 !important;

    white-space:nowrap !important;
  }

  .my-schedule-panel .attendance-calendar-nav button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;

    height:34px !important;
    min-height:34px !important;

    margin:0 !important;
    padding:0 !important;

    border:1px solid #dbe3ec !important;
    border-radius:9px !important;

    background:#fff !important;

    font-size:20px !important;
    line-height:1 !important;
  }


  /* ======================================================
     CALENDAR
     ====================================================== */

  .my-schedule-panel .attendance-calendar{
    width:auto !important;

    margin:0 5px 14px !important;

    overflow:hidden !important;

    border:1px solid #e2e8f0 !important;
    border-radius:12px !important;

    background:#fff !important;
  }


  .my-schedule-panel .attendance-calendar-weekdays{
    display:grid !important;

    grid-template-columns:
      repeat(7,minmax(0,1fr)) !important;

    width:100% !important;

    background:#f8fafc !important;
  }

  .my-schedule-panel
  .attendance-calendar-weekdays > div{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-width:0 !important;

    height:29px !important;

    padding:0 !important;

    color:#64748b !important;

    font-size:8px !important;
    font-weight:800 !important;
  }


  .my-schedule-panel .attendance-calendar-grid{
    display:grid !important;

    grid-template-columns:
      repeat(7,minmax(0,1fr)) !important;

    width:100% !important;
  }


  /* ======================================================
     DATE CELL
     ====================================================== */

  .my-schedule-panel .attendance-calendar-cell{
    position:relative !important;

    display:block !important;

    width:100% !important;
    min-width:0 !important;

    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;

    margin:0 !important;
    padding:3px !important;

    box-sizing:border-box !important;

    border:0 !important;
    border-right:1px solid #edf1f5 !important;
    border-bottom:1px solid #edf1f5 !important;

    border-radius:0 !important;

    background:#fff !important;

    overflow:hidden !important;

    box-shadow:none !important;
  }


  .my-schedule-panel
  .attendance-calendar-cell:nth-child(7n){
    border-right:0 !important;
  }


  /* DATE NUMBER */

  .my-schedule-panel .attendance-calendar-day{
    position:absolute !important;

    top:4px !important;
    left:4px !important;

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

    width:21px !important;
    height:21px !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:50% !important;

    color:#1e293b !important;

    font-size:10px !important;
    font-weight:800 !important;
    line-height:1 !important;
  }


  /* TODAY */

  .my-schedule-panel
  .attendance-calendar-cell.is-today
  .attendance-calendar-day{
    background:#eef2ff !important;
    color:#3730a3 !important;
  }


  /* SELECTED */

  .my-schedule-panel
  .attendance-calendar-cell.is-selected{
    background:#fff8fb !important;

    box-shadow:
      inset 0 0 0 2px #8b1e46 !important;
  }

  .my-schedule-panel
  .attendance-calendar-cell.is-selected
  .attendance-calendar-day{
    background:#8b1e46 !important;
    color:#fff !important;
  }


  /* ======================================================
     SHIFT LABEL
     ====================================================== */

  .my-schedule-panel
  .attendance-calendar-cell span:not(.attendance-calendar-day){
    max-width:100% !important;

    overflow:hidden !important;

    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }


  /*
   * Jam di cell kalender tidak dibutuhkan.
   * Detail lengkap tetap ada di detail tanggal.
   */
  .my-schedule-panel
  .attendance-calendar-cell small{
    display:none !important;
  }


  /* jika kalender memakai badge/count generik */
  .my-schedule-panel
  .attendance-calendar-count{
    position:absolute !important;

    left:3px !important;
    right:3px !important;
    top:auto !important;
    bottom:5px !important;

    display:block !important;

    width:auto !important;
    min-width:0 !important;

    height:20px !important;

    padding:5px 2px !important;

    border-radius:6px !important;

    background:#f1f5f9 !important;

    color:#334155 !important;

    overflow:hidden !important;

    text-align:center !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;

    font-size:8px !important;
    font-weight:800 !important;
    line-height:10px !important;
  }


  .my-schedule-panel .attendance-calendar-dot{
    display:none !important;
  }


  /* ======================================================
     SELECTED DATE DETAIL
     ====================================================== */

  .my-schedule-panel .attendance-calendar-selected{
    margin:10px 5px 14px !important;

    padding:12px !important;

    border:1px solid #e2e8f0 !important;
    border-radius:11px !important;

    background:#fff !important;
  }

  .my-schedule-panel
  .attendance-calendar-selected-head strong{
    font-size:13px !important;
  }

  .my-schedule-panel
  .attendance-calendar-selected-head span,
  .my-schedule-panel
  .attendance-calendar-selected-head small{
    font-size:9px !important;
  }

}


@media(max-width:380px){

  .my-schedule-panel .attendance-calendar-cell{
    height:54px !important;
    min-height:54px !important;
    max-height:54px !important;
  }

}