/* HTNS v292 — restore the mobile Schedule date header to the supplied reference.
   Mobile only: centered month title above a balanced previous/date/next row. */

@media (max-width:520px){
  #view-schedule .simple-schedule-date-head{
    margin:0 !important;
    padding:10px 11px 11px !important;
    border:1px solid #C9DAE7 !important;
    border-radius:18px !important;
    background:#FFFFFF !important;
    box-shadow:none !important;
  }

  #view-schedule .simple-schedule-date-head .schedule-month-title,
  #view-schedule .schedule-month-title{
    margin:0 0 8px !important;
    color:#0B315D !important;
    text-align:center !important;
    font-size:14px !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase !important;
  }

  #view-schedule .simple-date-nav,
  #view-schedule .schedule-nav-row.simple-date-nav{
    width:100% !important;
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    gap:8px !important;
    align-items:center !important;
    margin:0 !important;
  }

  #view-schedule .simple-date-nav .schedule-nav-btn,
  #view-schedule .schedule-nav-btn{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border:1.4px solid #0B315D !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    color:#0B315D !important;
    font-size:18px !important;
    line-height:1 !important;
    font-weight:700 !important;
    box-shadow:none !important;
  }

  #view-schedule .simple-date-nav .schedule-date-box,
  #view-schedule .schedule-date-box{
    width:100% !important;
    max-width:none !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 12px !important;
    border:1.4px solid #C9DCEB !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    box-shadow:none !important;
  }

  #view-schedule .schedule-date-box .schedule-date-icon,
  #view-schedule .schedule-date-icon{
    width:16px !important;
    height:16px !important;
    color:#71879A !important;
    flex:0 0 16px !important;
  }

  #view-schedule .schedule-date-box > span{
    color:#0B315D !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.01em !important;
  }
}

@media (max-width:360px){
  #view-schedule .simple-schedule-date-head{
    padding-left:9px !important;
    padding-right:9px !important;
  }
  #view-schedule .simple-date-nav,
  #view-schedule .schedule-nav-row.simple-date-nav{
    grid-template-columns:42px minmax(0,1fr) 42px !important;
    gap:7px !important;
  }
  #view-schedule .simple-date-nav .schedule-nav-btn,
  #view-schedule .schedule-nav-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
  }
  #view-schedule .simple-date-nav .schedule-date-box,
  #view-schedule .schedule-date-box{
    height:42px !important;
    min-height:42px !important;
  }
}

/* ======================================================================
   HTNS v302 r44 — Media Schedule approved-reference visual system.
   Visual-only: schedule data, admin selects, autosync, conflicts and
   Media/Worship switching continue to use the existing application logic.
   ====================================================================== */
@media (max-width:520px){
  html.htns-theme-v234 body #mainApp #view-schedule{
    --ms-navy:#0B315D;
    --ms-blue:#1789DE;
    --ms-blue-2:#39A8F1;
    --ms-line:#D4E4F0;
    --ms-muted:#667F9A;
    --ms-green:#087F4C;
  }

  /* Month / selected Sunday card */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-schedule-date-head{
    margin:0 0 10px !important;
    padding:14px 14px 15px !important;
    border:1px solid #D4E4F0 !important;
    border-radius:22px !important;
    background:#FFFFFF !important;
    box-shadow:0 10px 26px rgba(29,84,126,.07) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-month-title{
    margin:0 0 12px !important;
    color:var(--ms-navy) !important;
    font-size:17px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:.115em !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-date-nav,
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-nav-row.simple-date-nav{
    grid-template-columns:50px minmax(0,1fr) 50px !important;
    gap:10px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-date-nav .schedule-nav-btn,
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-nav-btn{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
    border:1.25px solid #C9DDEA !important;
    border-radius:15px !important;
    background:#FFFFFF !important;
    color:var(--ms-navy) !important;
    font-size:22px !important;
    font-weight:850 !important;
    box-shadow:0 3px 10px rgba(20,67,105,.035) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-date-nav .schedule-date-box,
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-date-box{
    height:50px !important;
    min-height:50px !important;
    border:1.25px solid #C9DDEA !important;
    border-radius:15px !important;
    background:#FDFEFF !important;
    gap:10px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-date-box .schedule-date-icon,
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-date-icon{
    width:21px !important;
    height:21px !important;
    flex:0 0 21px !important;
    color:#1688D5 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .schedule-date-box > span{
    color:var(--ms-navy) !important;
    font-size:16px !important;
    font-weight:950 !important;
  }

  /* Media / Worship segmented cards */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tabs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    margin:0 0 10px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab{
    position:relative !important;
    height:56px !important;
    min-height:56px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) auto !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:8px !important;
    padding:7px 11px !important;
    border:1px solid #D6E5F0 !important;
    border-radius:17px !important;
    background:#FFFFFF !important;
    color:var(--ms-navy) !important;
    box-shadow:0 6px 14px rgba(29,84,126,.045) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab::before{
    display:none !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab > svg{
    width:32px !important;
    height:32px !important;
    padding:7px !important;
    border-radius:11px !important;
    background:#EAF5FF !important;
    color:#1788D6 !important;
    box-sizing:border-box !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab span{
    min-width:0 !important;
    color:inherit !important;
    font-size:12px !important;
    line-height:1.05 !important;
    font-weight:950 !important;
    text-align:left !important;
    white-space:nowrap !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab small{
    margin:0 !important;
    min-width:42px !important;
    padding:6px 9px !important;
    border-radius:999px !important;
    background:#EEF4FA !important;
    color:#56728C !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
    opacity:1 !important;
    text-align:center !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:first-child.active{
    background:linear-gradient(135deg,var(--ms-blue) 0%,var(--ms-blue-2) 100%) !important;
    color:#FFFFFF !important;
    border-color:#1688DB !important;
    box-shadow:0 9px 20px rgba(20,132,220,.22) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:first-child.active > svg{
    background:rgba(255,255,255,.16) !important;
    color:#FFFFFF !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:first-child.active small{
    background:rgba(255,255,255,.18) !important;
    color:#FFFFFF !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:last-child > svg{
    background:#F2E8FF !important;
    color:#7628C7 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:last-child.active{
    background:linear-gradient(135deg,#7F3ED6 0%,#9B62E8 100%) !important;
    color:#FFFFFF !important;
    border-color:#7F3ED6 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:last-child.active > svg,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-tab:last-child.active small{
    background:rgba(255,255,255,.17) !important;
    color:#FFFFFF !important;
  }

  /* Media Team editor card */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"]{
    margin-top:0 !important;
    overflow:visible !important;
    border:1px solid #D4E5F1 !important;
    border-radius:23px !important;
    background:#FFFFFF !important;
    box-shadow:0 12px 30px rgba(27,83,126,.075) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head{
    min-height:83px !important;
    padding:14px 14px 12px !important;
    align-items:flex-start !important;
    border-bottom:0 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head > div{
    display:grid !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:11px !important;
    min-width:0 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head > div > svg{
    grid-row:1 / 3 !important;
    width:48px !important;
    height:48px !important;
    padding:12px !important;
    border-radius:14px !important;
    background:#E8F4FE !important;
    color:#1585D1 !important;
    box-sizing:border-box !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head h3{
    grid-column:2 !important;
    margin:1px 0 0 !important;
    color:var(--ms-navy) !important;
    font-size:20px !important;
    line-height:1.08 !important;
    font-weight:950 !important;
    letter-spacing:.01em !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head h3::after{
    content:"Right people. Smooth service." !important;
    display:block !important;
    margin-top:5px !important;
    color:#6B8299 !important;
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:650 !important;
    letter-spacing:0 !important;
  }
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-team-editor-head h3::after{
    content:"Đúng người. Phục vụ trọn vẹn." !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-fill-pill{
    min-width:63px !important;
    height:34px !important;
    padding:0 11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#E0F7EA !important;
    color:var(--ms-green) !important;
    font-size:12px !important;
    font-weight:950 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-fill-pill svg{
    width:17px !important;
    height:17px !important;
  }

  /* Media role assignment rows */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-list{
    padding:0 12px 12px !important;
    display:grid !important;
    gap:7px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row.coordinator-row{
    min-height:64px !important;
    grid-template-columns:minmax(145px,1.05fr) minmax(0,1fr) !important;
    gap:9px !important;
    padding:7px 9px !important;
    border:1px solid #DCE9F2 !important;
    border-radius:16px !important;
    background:#FEFFFF !important;
    box-shadow:0 4px 10px rgba(29,84,126,.025) !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:last-child{
    border-bottom:1px solid #DCE9F2 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-role-label{
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    align-items:center !important;
    column-gap:9px !important;
    color:var(--ms-navy) !important;
    font-size:13px !important;
    line-height:1.08 !important;
    font-weight:950 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .schedule-role-icon{
    grid-row:1 / 3 !important;
    width:46px !important;
    height:46px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
    border:0 !important;
    border-radius:13px !important;
    background:#EAF5FF !important;
    color:#1284D1 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .schedule-role-icon svg{
    width:24px !important;
    height:24px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-role-label > span:last-child{
    grid-column:2 !important;
    align-self:end !important;
    min-width:0 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-role-label > span:last-child::after{
    display:block !important;
    margin-top:4px !important;
    color:#6D8398 !important;
    font-size:9px !important;
    line-height:1.05 !important;
    font-weight:650 !important;
    white-space:normal !important;
  }

  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(1) .simple-role-label > span:last-child::after{content:"Oversees media team" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(2) .simple-role-label > span:last-child::after{content:"Room prep & checklists" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(3) .simple-role-label > span:last-child::after{content:"Camera & streaming" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(4) .simple-role-label > span:last-child::after{content:"Slides & display" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(5) .simple-role-label > span:last-child::after{content:"Audio mixer & microphones" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(6) .simple-role-label > span:last-child::after{content:"Lighting & stage equipment" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(7) .simple-role-label > span:last-child::after{content:"Photos & special moments" !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(8) .simple-role-label > span:last-child::after{content:"Closing & shutdown" !important;}

  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(1) .simple-role-label > span:last-child::after{content:"Điều phối Ban Media" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(2) .simple-role-label > span:last-child::after{content:"Chuẩn bị phòng & kiểm tra" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(3) .simple-role-label > span:last-child::after{content:"Máy quay & phát trực tiếp" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(4) .simple-role-label > span:last-child::after{content:"Trình chiếu & màn hình" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(5) .simple-role-label > span:last-child::after{content:"Âm thanh & micro" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(6) .simple-role-label > span:last-child::after{content:"Ánh sáng & thiết bị sân khấu" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(7) .simple-role-label > span:last-child::after{content:"Hình ảnh & khoảnh khắc" !important;}
  html[lang="vi"].htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(8) .simple-role-label > span:last-child::after{content:"Đóng cửa & tắt thiết bị" !important;}

  /* Pastel role identities from the reference. */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(1) .schedule-role-icon{background:#FFF2CF !important;color:#D89500 !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(2) .schedule-role-icon{background:#E8F5FF !important;color:#1687D5 !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(3) .schedule-role-icon{background:#F0E8FF !important;color:#7434C7 !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(4) .schedule-role-icon{background:#E8F5FF !important;color:#117FC9 !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(5) .schedule-role-icon{background:#E2F7ED !important;color:#07805B !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(6) .schedule-role-icon{background:#FFE5EE !important;color:#BE1D58 !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(7) .schedule-role-icon{background:#E4F8EC !important;color:#07805B !important;}
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row:nth-child(8) .schedule-role-icon{background:#FFE4EA !important;color:#C1164B !important;}

  /* Assignment controls stay fully functional, now matching the reference cards. */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-row-control,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-coordinator-controls{
    min-width:0 !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-select,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-person-static{
    height:46px !important;
    min-height:46px !important;
    border:1px solid #D8E6F0 !important;
    border-radius:14px !important;
    background:#FFFFFF !important;
    color:var(--ms-navy) !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:850 !important;
    box-shadow:none !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-select{
    padding-left:10px !important;
    padding-right:27px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-coordinator-controls{
    gap:6px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-coordinator-controls .simple-schedule-select{
    padding-left:7px !important;
    padding-right:20px !important;
    /* Use the shared assignment-name font size, including its narrow-screen rule. */
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-select-wrap.has-conflict .simple-schedule-select,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-person-static.has-conflict{
    border-color:#E7BC55 !important;
    background:#FFFDF7 !important;
  }

  /* Keep save/discard controls integrated with the new white editor card. */
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-actions{
    margin:0 12px 12px !important;
    padding:9px !important;
    border:1px solid #DCE9F2 !important;
    border-radius:15px !important;
    background:#F8FBFE !important;
  }
}

@media (max-width:380px){
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row,
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-schedule-row.coordinator-row{
    grid-template-columns:minmax(126px,1fr) minmax(0,.92fr) !important;
    padding-left:7px !important;
    padding-right:7px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-role-label{
    grid-template-columns:40px minmax(0,1fr) !important;
    column-gap:7px !important;
    font-size:11.5px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .schedule-role-icon{
    width:40px !important;
    height:40px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .schedule-role-icon svg{
    width:21px !important;
    height:21px !important;
  }
  html.htns-theme-v234 body #mainApp #view-schedule .simple-team-editor[data-team="media"] .simple-role-label > span:last-child::after{
    font-size:8px !important;
  }
}