/* SỬA CHỮA V1.6.3 DESKTOP — website-style horizontal top navigation.
   Visual-only overrides. Desktop geometry remains owned by responsive.css. */
@media (min-width:1100px){
  .desktop-mode .tabwrap{
    z-index:120;
    background:rgba(0,0,0,.92)!important;
    border-right:0!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    backdrop-filter:saturate(180%) blur(18px)
  }
  .desktop-mode .tabs{
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important
  }
  .desktop-mode .tab{
    color:#d2d2d7!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    transition:background-color .16s ease,color .16s ease,transform .16s ease
  }
  .desktop-mode .tab i{display:none!important}
  .desktop-mode .tab:hover{background:#1d1d1f!important;color:#fff!important;filter:none!important}
  .desktop-mode .tab.on{
    background:#f5f5f7!important;
    color:#1d1d1f!important;
    border:0!important;
    box-shadow:none!important
  }
  .desktop-mode .tab.on span{color:#1d1d1f!important}

  .desktop-mode .desktop-brand{
    position:absolute!important;
    left:var(--desktop-gutter)!important;
    right:auto!important;
    top:0!important;
    height:68px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    pointer-events:none
  }
  .desktop-mode .desktop-brand-mark{
    width:32px!important;height:32px!important;border-radius:10px!important;
    background:#1c1c1e!important;border:1px solid rgba(255,255,255,.12)!important;
    color:#f5f5f7!important;font-size:10px!important;font-weight:750!important
  }
  .desktop-mode .desktop-brand-copy strong{
    color:#f5f5f7!important;font-size:13px!important;line-height:1.1!important;font-weight:650!important
  }
  .desktop-mode .desktop-brand-copy span{
    margin-top:3px!important;color:#86868b!important;font-size:10px!important;line-height:1!important
  }

  .desktop-mode .desktop-nav-account{
    position:absolute;right:var(--desktop-gutter);top:0;height:68px;
    display:flex;align-items:center;gap:10px;color:#a1a1a6;font-size:11px
  }
  .desktop-mode .desktop-sync-state{display:flex;align-items:center;gap:6px;white-space:nowrap}
  .desktop-mode .desktop-sync-dot{width:7px;height:7px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.10)}
  .desktop-mode .desktop-nav-account[data-sync="syncing"] .desktop-sync-dot{background:#2997ff;box-shadow:0 0 0 3px rgba(41,151,255,.10)}
  .desktop-mode .desktop-nav-account[data-sync="offline"] .desktop-sync-dot{background:#ff9f0a;box-shadow:0 0 0 3px rgba(255,159,10,.10)}
  .desktop-mode .desktop-account-avatar{
    width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
    background:#1c1c1e;border:1px solid rgba(255,255,255,.12);color:#f5f5f7;font-size:11px;font-weight:700
  }

  /* Page chrome: top navigation owns brand/account, page owns only its title. */
  .desktop-mode .screen>.head .eyebrow,
  .desktop-mode .screen>.head .avatar,
  .desktop-mode .build-badge{display:none!important}
  .desktop-mode .screen>.head{min-height:auto;margin:0 0 28px!important}
  .desktop-mode .screen>.head .title{font-size:44px!important;line-height:1.04!important;letter-spacing:-.04em!important}

  /* Home reads like a website page beneath the global navigation. */
  .desktop-mode .screen-home.active{gap:24px!important}
  .desktop-mode .screen-home>.repair-hero{border-radius:26px!important}

  /* Ticket master-detail needs a little more room now that the sidebar is gone. */
  .desktop-mode .screen-tickets>.head,
  .desktop-mode .screen-tickets>.search,
  .desktop-mode .screen-tickets>.search-hint,
  .desktop-mode .screen-tickets>.ticket-filter,
  .desktop-mode .screen-tickets>.ticket-summary,
  .desktop-mode .screen-tickets>#ticketList{width:44%!important;min-width:390px!important;max-width:660px!important}
  .desktop-mode .desktop-ticket-placeholder{left:calc(44% + 42px)!important;right:0!important;top:88px!important;bottom:0!important}

  /* Desktop menu page wording/layout. */
  .desktop-mode .screen-menu .section{max-width:920px!important}
}

@media (min-width:1100px) and (max-width:1279px){
  .desktop-mode .desktop-brand-copy span{display:none!important}
  .desktop-mode .desktop-sync-label{display:none!important}
  .desktop-mode .desktop-nav-account{gap:6px}
  .desktop-mode .desktop-account-avatar{width:32px;height:32px}
  .desktop-mode .screen-tickets>.head,
  .desktop-mode .screen-tickets>.search,
  .desktop-mode .screen-tickets>.search-hint,
  .desktop-mode .screen-tickets>.ticket-filter,
  .desktop-mode .screen-tickets>.ticket-summary,
  .desktop-mode .screen-tickets>#ticketList{width:46%!important;min-width:360px!important}
  .desktop-mode .desktop-ticket-placeholder{left:calc(46% + 30px)!important}
}