/* Build 402 — mobile Attention layout, contract palette and day-panel ordering */

/* Contract action follows the contract row palette. This selector intentionally
   exceeds the earlier Build 398 orange Chase rule. */
#attention-panel .attn-grid-row.attn-row-contract::after,
#attention-panel .attn-grid-row.attn-row-contract[data-attn-action="chase"]::after{
  background:#dbeafe!important;
  border-color:#bfdbfe!important;
  color:#1d4ed8!important;
}

/* The main calendar renders one mode at a time, so make the active mode a
   column and place the selected-day panel before the calendar grid. */
.pcal-wrap > .qcal-mode-month{
  display:flex!important;
  flex-direction:column!important;
}
.pcal-wrap > .qcal-mode-month > #qcm-day-panel{
  order:-1!important;
  margin:0 0 14px!important;
}
.pcal-wrap > .qcal-mode-month > .qcm-grid{
  order:0!important;
}
.pcal-wrap > .qcal-mode-week{
  display:flex!important;
  flex-direction:column!important;
}
.pcal-wrap > .qcal-mode-week > .guard-week-day-panel{
  order:-1!important;
  margin:0 0 14px!important;
}
.pcal-wrap > .qcal-mode-week > .qcw-grid{
  order:0!important;
}

@media(max-width:760px){
  /* Mobile card layout:
     customer | status | delete
     type     | action | paid
     service  | price  | price */
  #attention-panel .attn-grid-row{
    grid-template-columns:minmax(0,1fr) auto 30px!important;
    grid-template-areas:
      "customer status delete"
      "type action payment"
      "service price price"!important;
    column-gap:8px!important;
    row-gap:5px!important;
    align-items:start!important;
    min-width:0!important;
    padding:10px 4px!important;
  }

  #attention-panel .attn-grid-row > .attn-customer-cell{
    grid-area:customer!important;
    min-width:0!important;
    align-self:center!important;
  }
  #attention-panel .attn-grid-row > .attn-type-cell{
    grid-area:type!important;
    min-width:0!important;
    align-self:center!important;
    margin:0!important;
  }
  #attention-panel .attn-grid-row > .attn-service-cell{
    grid-area:service!important;
    min-width:0!important;
    align-self:stretch!important;
    padding:7px 8px 0 0!important;
    border-top:1px solid rgba(120,130,120,.16)!important;
  }
  #attention-panel .attn-grid-row > .attn-price-cell{
    grid-area:price!important;
    min-width:70px!important;
    align-self:stretch!important;
    justify-content:flex-end!important;
    padding:7px 0 0 8px!important;
    border-top:1px solid rgba(120,130,120,.16)!important;
    text-align:right!important;
  }
  #attention-panel .attn-grid-row > .attn-status-cell{
    grid-area:status!important;
    min-width:0!important;
    align-self:center!important;
    align-items:flex-end!important;
    justify-content:flex-start!important;
    padding:0!important;
    text-align:right!important;
  }
  #attention-panel .attn-grid-row > .attn-delete-cell{
    grid-area:delete!important;
    align-self:center!important;
    justify-self:end!important;
  }

  #attention-panel .attn-grid-row::after{
    grid-area:action!important;
    align-self:center!important;
    justify-self:end!important;
    min-width:48px!important;
    height:25px!important;
    margin:0!important;
    padding:0 7px!important;
    font-size:8px!important;
  }
  #attention-panel .attn-grid-row::before{
    grid-area:payment!important;
    align-self:center!important;
    justify-self:end!important;
    width:24px!important;
    height:24px!important;
    margin:0!important;
    font-size:13px!important;
  }

  #attention-panel .attn-customer-cell strong,
  #attention-panel .attn-service-cell strong{
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  #attention-panel .attn-service-cell small{
    display:inline!important;
    margin:0 0 0 5px!important;
    white-space:normal!important;
  }
  #attention-panel .attn-service-cell small::before{
    content:"· ";
  }
  #attention-panel .attn-status-cell > small[hidden]{
    display:none!important;
  }

  .pcal-wrap > .qcal-mode-month > #qcm-day-panel,
  .pcal-wrap > .qcal-mode-week > .guard-week-day-panel{
    margin-bottom:10px!important;
  }
}

@media(max-width:420px){
  #attention-panel .attn-grid-row{
    grid-template-columns:minmax(0,1fr) auto 28px!important;
    column-gap:6px!important;
    padding-left:2px!important;
    padding-right:2px!important;
  }
  #attention-panel .attn-grid-row::after{
    min-width:44px!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
}