/* Direct UI overrides: compact mobile chrome, nav order and true month grid. */

.mobile-separated-nav button:nth-child(1),
.desktop-separated-shell .sidebar nav button:nth-child(1){order:1}
.mobile-separated-nav button:nth-child(2),
.desktop-separated-shell .sidebar nav button:nth-child(2){order:4}
.mobile-separated-nav button:nth-child(3),
.desktop-separated-shell .sidebar nav button:nth-child(3){order:2}
.mobile-separated-nav button:nth-child(4),
.desktop-separated-shell .sidebar nav button:nth-child(4){order:3}
.mobile-separated-nav button:nth-child(5),
.desktop-separated-shell .sidebar nav button:nth-child(5){order:5}
.mobile-separated-nav button:nth-child(n+6),
.desktop-separated-shell .sidebar nav button:nth-child(n+6){order:6}

.mobile-separated-nav button:nth-child(3) span,
.desktop-separated-shell .sidebar nav button:nth-child(3) span{font-size:0!important}
.mobile-separated-nav button:nth-child(3) span::after{content:'Planner';font-size:10px;line-height:1.15}
.desktop-separated-shell .sidebar nav button:nth-child(3) span::after{content:'Planner';font-size:13px;line-height:1.15}
html[dir='rtl'] .mobile-separated-nav button:nth-child(3) span::after,
html[dir='rtl'] .desktop-separated-shell .sidebar nav button:nth-child(3) span::after{content:'المخطط'}

@media(max-width:760px){
  .mobile-separated-shell>.mobile-separated-header{
    box-sizing:border-box!important;
    position:relative!important;
    top:auto!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    margin:0!important;
    padding:5px 10px!important;
    grid-template-columns:minmax(0,1fr) auto minmax(96px,118px)!important;
    grid-template-areas:'brand language workspace'!important;
    align-items:center!important;
    align-content:center!important;
    gap:6px!important;
    overflow:visible!important;
    background:#f5f7f5!important;
    border-bottom:1px solid #e1e7e3!important;
  }
  .mobile-separated-header>*{margin-top:0!important;margin-bottom:0!important}
  .mobile-separated-header>.brand{grid-area:brand!important;max-width:112px!important;height:34px!important;align-items:center!important}
  .mobile-separated-header>.brand .brand-mark{width:27px!important;min-width:27px!important;height:27px!important}
  .mobile-separated-header>.brand strong{font-size:14px!important;line-height:1!important}
  .mobile-separated-header>.language-toggle{grid-area:language!important;font-size:10.5px!important;gap:3px!important;align-self:center!important}
  .mobile-separated-workspace-switcher{grid-area:workspace!important;max-width:118px!important;align-self:center!important}
  .mobile-separated-workspace-menu summary{height:34px!important;min-height:34px!important;padding:0 8px!important;font-size:11.5px!important;border-radius:10px!important}
  .mobile-separated-workspace-list{top:calc(100% + 5px)!important}
  .mobile-separated-workspace{padding-top:12px!important}

  .calendar-panel .weekday-row{
    width:calc(100% - 16px)!important;
    margin:0 8px!important;
    padding:0 5px!important;
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:2px!important;
    border:0!important;
    background:transparent!important;
  }
  .calendar-panel .weekday-row span{
    display:block!important;
    min-width:0!important;
    padding:7px 0 5px!important;
    text-align:center!important;
    font-size:7.5px!important;
    letter-spacing:.02em!important;
    color:#748179!important;
  }
  .calendar-panel .month-grid{
    box-sizing:border-box!important;
    width:calc(100% - 16px)!important;
    margin:0 8px 10px!important;
    padding:6px!important;
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    gap:2px!important;
    border:1px solid #dce7df!important;
    border-radius:14px!important;
    background:#fff!important;
    overflow:hidden!important;
  }
  .calendar-panel .month-grid>.day-cell{
    box-sizing:border-box!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1/1!important;
    margin:0!important;
    padding:4px!important;
    border:0!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:none!important;
    overflow:hidden!important;
  }
  .calendar-panel .month-grid>.day-cell.blank{background:#f7faf8!important}
  .calendar-panel .month-grid>.day-cell.today{
    background:#eaf7ef!important;
    box-shadow:inset 0 0 0 1px #79b98f!important;
  }
  .calendar-panel .month-grid .day-add{
    width:100%!important;
    min-height:20px!important;
    height:20px!important;
    padding:0!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }
  .calendar-panel .month-grid .day-add b{
    width:20px!important;
    height:20px!important;
    border-radius:6px!important;
    font-size:10px!important;
    line-height:20px!important;
    text-align:center!important;
  }
  .calendar-panel .month-grid .day-add svg{display:none!important}
  .calendar-panel .month-grid>.day-cell>div{
    display:flex!important;
    flex-wrap:wrap!important;
    align-content:flex-start!important;
    gap:2px!important;
    margin-top:3px!important;
  }
  .calendar-panel .month-grid .calendar-post{
    display:block!important;
    width:5px!important;
    min-width:5px!important;
    height:5px!important;
    min-height:5px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:#8fa9db!important;
    overflow:hidden!important;
  }
  .calendar-panel .month-grid .calendar-post.scheduled{background:#dba44b!important}
  .calendar-panel .month-grid .calendar-post.published{background:#4f9f70!important}
  .calendar-panel .month-grid .calendar-post.failed{background:#d66767!important}
  .calendar-panel .month-grid .calendar-post>span{display:none!important}
}

@media(max-width:390px){
  .mobile-separated-shell>.mobile-separated-header{height:54px!important;min-height:54px!important;max-height:54px!important;grid-template-columns:minmax(0,1fr) auto minmax(90px,106px)!important}
  .mobile-separated-header>.brand{max-width:100px!important}
  .mobile-separated-workspace-switcher{max-width:106px!important}
  .calendar-panel .month-grid{padding:5px!important;gap:1px!important}
  .calendar-panel .month-grid>.day-cell{padding:3px!important}
}